2018-03-19 css 实现左列定宽，右列自适应宽度，等高

上次面试提到了一个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 */
}

等高布局实现
在线地址