共计 2612 个字符，预计需要花费 7 分钟才能阅读完成。
一. 浮动布局
1. 先让固定宽度的 div 浮动！使其脱离文档流。2.margin-left 的值等于固定 div 的宽度相等。
.aside{
float: left;
width: 200px;
background-color: red;
}
.content{
margin-left: 200px;
background-color: blue;
}
<div class=”aside”>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore provident dolor in voluptatum tempore non, placeat obcaecati totam ut delectus libero excepturi distinctio asperiores odit nobis soluta, esse aspernatur beatae.
</div>
<div class=”content”>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore provident dolor in voluptatum tempore non, placeat obcaecati totam ut delectus libero excepturi distinctio asperiores odit nobis soluta, esse aspernatur beatae.
</div>
二.margin 的负值(3 个 div)
是固定宽度的 div 脱离文档流。
利用 marin 负值可以使得，后面的 div 可以与前面的 div 保持同行显示。
给包裹内容的 div 加 margin-left 可以使得与左边的文字不重叠
.aside{
float: left;
margin-right: -200px;
width: 200px;
background-color: red;
}
.content{
float: right;
}
.content .inner{
margin-left: 200px;
background-color: blue;
}
<div class=”aside”> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore provident dolor in voluptatum tempore non, placeat obcaecati totam ut delectus libero excepturi distinctio asperiores odit nobis soluta, esse aspernatur beatae. </div> <div class=”content”> <div class=”inner”> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia labore facere delectus quaerat expedita, tenetur recusandae tempora eos natus suscipit voluptatum necessitatibus soluta voluptates modi ullam. Ab minima similique, illum! </div> </div>
三.calc()计算属性
注意：使用 calc 计算属性的时候 运算符 (- + 等等) 两边必须有空格
注意两个 div 必须一左一右浮动。
calc 的宽度必须要减去的宽度要与固定宽度保持一致。
.aside{
float: left;
width: 200px;
}
.content{
float: right;
calc:(100% – 200px);
}<div class=”aside”> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore provident dolor in voluptatum tempore non, placeat obcaecati totam ut delectus libero excepturi distinctio asperiores odit nobis soluta, esse aspernatur beatae.</div><div class=”content”> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore provident dolor in voluptatum tempore non, placeat obcaecati totam ut delectus libero excepturi distinctio asperiores odit nobis soluta, esse aspernatur beatae.</div>
四.flex 布局
需要给父级 div 设置 display: flex 属性。
固定宽度的 div 设置 flex: 0 0 200px 即可。
内容区域的 div 直接写出 flex: 1 即可。
body{display: flex;}.aside{
flex: 0 0 200px;
background-color: red;
}.content{
flex: 1;
background-color:blue;
}
<div class=”aside”> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat magnam nihil nostrum, similique dolor deserunt voluptatem pariatur alias, ipsum, error quos quo accusantium. Deleniti neque, pariatur voluptates maxime quam perferendis!</div><div class=”content”> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur tempora sequi minima, placeat esse nulla dolor dolores praesentium illo, distinctio fugiat eligendi debitis animi ut impedit, magni vitae officiis, architecto.</div>
阮一峰老师写的教程权威传送门：http://www.ruanyifeng.com/blo…
