html - 当 css3 列向右扩展时，DIV 的宽度不会随着固定的高度而增长

Question

fiddle :http://jsfiddle.net/sdthelord/tnsLE/

<div id="out">
  <div id="in">
    <P>
      Lorem ipsum...
    </P>
  </div>
</div>

#in {
  -moz-column-width: 200px;
  column-width: 200px;
  height: 400px;
  border: 1px solid red;
}
#out {
  border: 1px solid blue;
}

我在水平布局页面上有一个带有 CSS3 列和固定高度的 DIV。此 div 包含在另一个 div 元素中，该元素还包含标题 h1。

重点是，我不想一开始就指定两个 div 的宽度，所以宽度要么是 100% 要么是自动，并且最小宽度样式确保它不会缩小(不在 fiddle 中) .

问题是，给定 div 的边框，您会发现即使添加了新列并且内容需要更多空间，div 的大小/宽度也不会增加。 有没有办法强制带有列的 div 尽可能大以包含所有列？

Answer 1

这里是 Fiddle

将 height: 100%; 添加到您的 #in{...} CSS

即

#in {
    -moz-column-width: 200px;
    column-width: 200px;
    height: 400px;
    border: 1px solid red;
    height: 100%;
}