CSS：没有 <table> 且第一列高度可变的 2 列布局

Question

我愿意：

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

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

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

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

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

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

谢谢，

Answer 1

您可以使用 display CSS 属性让您的 divs 表现得像 table 细胞。这是通过在 parent 上设置 display: table; 并在 children 上设置 display: table-cell; 来完成的。

试试这个代码：

.container {
   display: table;
}

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

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

使用此方法的唯一区别是您的第一个固定列将占据与其 parent 相同的高度，与 td 相同。不过，您可以通过将 float: left; 添加到 children.

来解决此问题

Updated Fiddle

Answer 2

使用 flexbox：

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

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 计算方法来实现，按照这个 fiddle - 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：没有 <table> 且第一列高度可变的 2 列布局

CSS: 2 columns layout without <table> and with first column variable height

css

layout

css-float