求css左侧宽度固定右侧宽度自适应的办法

html-css011

求css左侧宽度固定右侧宽度自适应的办法,第1张

<style type="text/css">

html, body {margin: 0padding: 0}

.all{ width:100% height:100%}

.left{ width:100px float:left background:#990 height:100%margin-left: -100%}

.right{ width:100% background:#F90 height:100% float:left}

.right_in{ margin-left:100px height:100% }

</style> <div class="all">

    <div class="right">

        <div class="right_in"> 内容</div>

    </div>

    <div class="left">我是固定的</div>

</div>

这样就可以让右侧的宽度自适应,左侧的宽度固定。

原理:

先让右侧的宽度定义为100%;里面的right_in的左边距等于左边固定宽度的尺寸.

写一个小例子给你看看,你就明白了

html内容如下

<div class="left">左边的内容</div>

<div class="right">

    <div class="right_content">右边的内容</div>

</div>

css内容如下:

.left{width:200pxfloat:leftmargin-right:-200pxbackground: #00ca57}

.right{width:100%float:left}

.right_content{margin-left:200pxbackground: #269abc}

完美实现,请采纳~!

2列布局,左侧定宽,右侧宽度为100%,就能自适应。

<!DOCTYPE html>

<html lang="en">

<head>

   <meta charset="UTF-8">

   <title>两列布局</title>

    <style>

       .container {

           width: 80%

           height: 600px

           border: 10px solid lightslategray

           margin: 0 auto

       }

       .left,.right {

           /* 将块级元素呈现水平方向的排列效果 */

           float: left

       }

       .left {

           /* 定宽 - 宽度值确定不变的 */

           width: 25%

           height: 600px

           background-color: lightcoral

       }

       .right {

           width: 75%

           height: 600px

           background-color: lightseagreen

       }

   </style>

</head>

<body>

<!-- 容器 -->

<div class="container">

   <!-- 两列 - 定宽 -->

   <div class="left"></div>

   <div class="right"></div>

</div>

</body>

</html>

贴一种给你,我这边有6种实现方法。