Question

我想：

设计2列布局：1个固定宽度（比如200px），另一个使用所有剩余宽度的房间
第一个高度是可变且未知的，我不希望它超出其父流

在使用CSS之前，我会简单地使用<table>和两个<td>来做到这一点。使用CSS，现在，我使用基于浮动左列+左填充右列+清除<div>之后的方法：

.container2 .columnLeft {
  float: left;
  width: 200px;
}

.container2 .columnRight {
  padding-left: 200px;
}

但我不确定这是一个正确的方法。你能告诉我你会怎么做吗？

请在方便时使用和修改http://jsfiddle.net/rjjr24sf/4/。

谢谢，

Answer 1

使用flexbox：

.container {
    display: flex;
}
.container .columnLeft {
    width: 200px;
}
.container .columnRight {
    flex: 1; /* Grow to rest of width */
}

Answer 2

您可以使用display CSS属性使divs表现得像表格单元格。这可以通过在父级上设置display: table;，在子级上设置display: table-cell;来完成。

试试这段代码：

.container {
   display: table;
}

.container .columnLeft {
    width: 200px;
    display: table-cell;
}

.container .columnRight {
    display: table-cell;
}

使用此方法的唯一区别是，您的第一个固定列将占用与其父级相同的高度，与td相同。虽然，您可以通过向您的孩子添加float: left;来解决此问题。

<强> Updated Fiddle

Answer 3

http://jsfiddle.net/bgBXM/10/

#RightColumn {
margin-left: 200px;
background-color: blue;
}

#LeftColumn {
float : left;
width: 200px;
background-color: red
}

<div id="Container">
<div id="LeftColumn">Left column</div>
<div id="RightColumn">Right column</div>
</div>

Answer 4

你也可以使用CSS计算方法实现这一点，按照这个小提琴 - http://jsfiddle.net/aewqgh7t/
所以标记：

<div class="container2">
    <div class="columnLeft">
        Some Content<br/>
        Some Content<br/>
        Some Content<br/>
        Some Content<br/>
        Some Content
    </div>
    <div class="columnRight">
        Some Content
    </div>
</div>

css：

.container2 { 
   width:100%; 
   background: lightgrey; 
   overflow:hidden; 
}
.columnLeft { 
   background: salmon; 
   float:left; 
   width:200px; 
}
.columnRight { 
   background: darkblue; 
   float:left; 
   margin-left:20px; 
   width: calc(100% - 220px) /* To calculate remaining space */; 
}

您还需要考虑浏览器对calc css函数的支持：CanIUse

CSS：2列布局没有和第一列变量高度<table> </table>

4 个答案: