Article directory
1. CSS two-column layout (left column fixed width, right column adaptive width)
final effect:
Method 1: float + margin
HTML：
<div class="container">
<div class="left">定宽</div>
<div class="right">自适应</div>
</div>
CSS：
/* 不给高度不行，不给宽度可以自适应 */
.container {
height: 300px;
}
.left {
float: left;
/* 定宽 */
width: 200px;
height: 100%;
background-color:chartreuse;
}
.right {
/* 不设置宽度自适应 */
height: 100%;
background-color:coral;
margin-left: 200px;
}
Method 2: Positioning + margin
HTML unchanged
CSS:
/* 不给高度不行，不给宽度可以自适应 */
.container {
position: relative;
height: 300px;
}
.left {
position: absolute;
left: 0;
/* 定宽 */
width: 200px;
height: 100%;
background-color:chartreuse;
}
.right {
/* 不设置宽度自适应 */
height: 100%;
/* 方法一：margin-left: 200px(只设置边距也可以实现) */
/* 方法二：定位*/
position:absolute;
left: 200px;
right: 0; /*不设置这个，宽度会缩在一起，不自适应展开*/
background-color:coral;
}
Method 3: Float + BFC
HTML unchanged
CSS:
.container {
height: 300px;
}
.left {
float: left;
/* 定宽 */
width: 200px;
height: 100%;
background-color: chartreuse;
}
.right {
/* 不设置宽度自适应 */
height: 100%;
overflow: hidden; /*触发BFC条件*/
background-color: coral;
}
Principle: Add BFC attributes to normal elements, normal elements will not be blocked, and they will be lined up around floating elements
✳ A small summary: 脱离文档流的方式The general idea of the above (such as floating, positioning) is: first let 左定宽元素the elements out of the document flow, so that the elements in the right column can normally be separated from the document flow with the left column, and the elements “站成一排”in the left column are still covered with The elements in the right column, and finally, our 只需要调整一下右列元素margins, positioning, etc. can be completed~
Method 4: flex layout
HTML unchanged
CSS:
.container {
display: flex;
height: 300px;
}
.left {
/* 定宽 */
width: 200px;
/*height: 100% 因为未脱离文档流，所以不用设置高度也行*/
background-color: chartreuse;
}
.right {
/* flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。 */
flex: 1;
/*height: 100% 因为未脱离文档流，所以不用设置高度也行*/
background-color:coral;
}
Method 5: able layout
HTML unchanged
CSS:
/* table布局：(display:table-cell后)子级容器默认是自动平分宽度沾满父级容器； */
.container {
display: table;
height: 300px;
width: 100%;
}
.left {
display: table-cell;
/* 定宽 */
width: 200px;
/*height: 100% 因为未脱离文档流，所以不用设置高度也行*/
background-color: chartreuse;
}
.right {
/*height: 100% 因为未脱离文档流，所以不用设置高度也行*/
display: table-cell;
background-color: coral;
}
The table layout only needs to add the display: table attribute to the parent element and the display: table-cell attribute to the two child elements.
Second, CSS two-column layout (left column is not fixed width, right column adaptive width)
方法一：flex
方法二：浮动+BFC
Because the operation method is the same as the above demonstration, only the left column width attribute is removed, so I will not repeat them one by one.
Operation method: remove the width of the left column, and the width of the left column is adaptive according to the content, so as to achieve the effect of "the left column is not fixed width, and the right column is adaptive width".
Why only these two ways can be achieved?
Because other methods are out of the flow of the document (such as: floating, positioning), the internal elements cannot support the box that is out of the flow of the document.