Question

我尝试设置一个带有左侧边栏的页面，然后是其右边的其他内容。我见过的所有示例都使用带有<div>和display:table属性的display:table-cell标记，然后为侧边栏和内容区域指定宽度（以像素为单位），或者在至少，边栏。

就我而言，边栏中的内容并不是提前知道的。我所知道的是，它不会想要＆＃34;占据很大的宽度（即通过短线和换行符，整个语料库不应该非常宽）。所以，我不想指定侧边栏的宽度。

如何让侧边栏<div>自动对齐其中包含的最宽的元素，然后让内容<div>充当从侧边栏的右边缘到页面的右侧。

Answer 1

您可以使用display: table-cell，如果您希望两个区域具有相同的高度，并且还要使它们填满宽度，这将非常有用。

表行为的一部分是，它调整单元格大小以适应内容。因此，您可以将侧边栏单元格的宽度设置为一个非常小的值，它将尽可能小，仍然可以调整到其内容所需的最小尺寸。这对CSS表没有什么不同：

HTML：

<div class="container">
  <div class="column side">Side test content</div>
  <div class="column content">Main content</div>
</div>

CSS：

.container {
    display: table;
    width: 100%;
}
.column {
    display: table-cell;
    background-color: yellow;
    border: 1px solid blue;
}
.side {
    width: 1%;
}

http://jsfiddle.net/5bro1n06/

Answer 2

如果你不想使用表格元素，你可能想要使用css float

<强> HTML

<div class="container">
  <div class="column side">
    Menu Item 1<br/>
  </div>
  <div class="column content">
    lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
  </div>
</div>

<强> CSS

.container {
    width: 100%;
    position:relative;
}
.column {
    background-color: yellow;
}
.side {
    float: left;
    left:0;
    top:0;
    position:absolute;
    height:100%;
    border-right: 1px solid blue;
}

您的更新小提琴http://jsfiddle.net/5are6v29/2/ 就像其他人所说的那样，使用display：table-cell并没有什么问题，但我更喜欢用于列的方式，因为它通常会使我的标记更清晰，更容易阅读。

给一列提供它需要的东西，给另一列提供其他所有东西

2 个答案: