css布局宽度自适应

最新推荐文章于 2024-06-25 22:50:37 发布

SunshinePengChao

最新推荐文章于 2024-06-25 22:50:37 发布

阅读量562

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/SunshinePengChao/article/details/44014201

版权

css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

第一种方式，利用流布局(注意div的顺序)：

（注：代码只写关键部分）

两列布局，左侧固定，右侧自适应

*{
margin:0;
padding:0;
}

.left{
   background:red;
    float:left;
    width:200px;
}
.right{
   background:green;
   margin-left:200px;
}

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

两列布局，右侧固定，左侧自适应

*{
margin:0;
padding:0;
}

.left{
   background:red;
   margin-right:200px;
}
.right{
   background:green;
    float:right;
    width:200px;
}

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

两列布局，左右固定，中间自适应

    *{
    margin:0;
   padding:0;
}

.left{
   background:red;
   float:left;
    width:200px;
}
.right{
   background:green;
   float:right;
   width:200px;
}
<div class = "left">left</div>
<div class = "right">right</div>
<div class = "center">center</div>

第二种方式，使用100%、负边距：

两列布局，左侧固定，右侧自适应

    *{
    margin:0;
   padding:0;
}
    .left{
   background:red;
    float:left;
   margin-right:-100%;
    width:200px;
}
.right{

background:green;

/*解决ie6双边距bug*/

   display:inline;
    float:left;
   margin-left:200px;
   width:100%;

}

<div class = "left">left2</div>
<div class = "right">right2</div>

两列布局，右侧固定，左侧自适应

.left3{
   background:red;
   float:left;
   width:100%;
   margin-right:-200px;
}
.right3{
   background:green;
   float:right;
   width:200px;
}

<div class = "left">left2</div>
<div class = "right">right2</div>

两列布局，左右固定，中间自适应

*{
padding:0;
margin:0;
}
.center{
   background:yellow;
   float:left;
   width:100%;
}
.inner{
   margin:0 200px;
}
.left{
   background:green;
   float:left;
   margin-left:-100%;
   width:200px;
}
.right{
   background:red;
   float:left;
   margin-left:-200px;
   width:200px;
}
<div class = "center">
     <div class = "inner">
       center
   </div>
</div>
<div class = "left">left</div>
<div class = "right">right</div>