上次面試提到了一個css布局：實(shí)現(xiàn)左列定寬，右列自適應(yīng)寬度点把，等高布局
上次沒有答出來，只實(shí)現(xiàn)了左列定寬郎逃，右列自適應(yīng)寬度
搜了下有兩種方式：
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
}
在線地址
需要注意單個單詞默認(rèn)不換行褒翰，需要加上 word-break: break-all;
word-wrap: break-word;
使用負(fù)margin和padding-bottom,margin-bottom實(shí)現(xiàn)
<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 */
}
