上次面试提到了一个css布局：实现左列定宽，右列自适应宽度，等高布局
上次没有答出来，只实现了左列定宽，右列自适应宽度
搜了下有两种方式：
flex布局比较简单且容易理解
<div class="content">
<div class="left">#leftjdskfjdksjfdsjfldsjkfjkfsdjlkfjklfjdskjfkjfkdjskfljslklsjfkljsfkljsfkjsfskjflsjfklsjfsjfljsdkfjksdjflkdsflsjf</div>
<div class="right">#rigth</div>
</div>
.content {
display: flex;
}
.left {
background-color: blue;
width: 200px;
word-break: break-all;
word-wrap: break-word;
}
.right {
background-color: red;
flex: 1
}
在线地址
需要注意单个单词默认不换行，需要加上 word-break: break-all;
word-wrap: break-word;
使用负margin和padding-bottom,margin-bottom实现
<div id="container">
<div id="center" class="column">#center<br>dfdfd</div>
<div id="left" class="column">#left</div>
body {
min-width: 550px; /* 2x LC width + RC width */
}
#container {
padding-left: 200px; /* LC width */
overflow: hidden;
}
#container .column {
position: relative;
float: left;
padding-bottom: 100px;
margin-bottom: -100px;
}
#center {
background-color: #e9e9e9;
width: 100%;
}
#left {
background-color: red;
width: 200px; /* LC width */
right: 200px; /* LC width */
margin-left: -100%;
}
#container:after {
clear: both;
}
/*** IE6 Fix ***/
* html #left {
left: 150px; /* RC width */
}
