css - 一个块的宽度。带有“现代 UI”文本列的横向网站

Question

我正在尝试在我的网站上实现现代 UI 应用程序的外观（水平方向，文本列宽度定义宽度）。唯一的问题是文本容器占用了太多的宽度，我无法让它们很好地包裹文本。我需要#container 的高度来适应浏览器的大小。有什么建议么？ http://jsfiddle.net/PAN_IGI/tMtup/3/

HTML：

<div id="container">
<!-- START #container -->
<article>
    <p>Paragraph1</p>
    <p>Paragraph2</p>
</article>
<article>
    <p>Paragraph1</p>
    <p>Paragraph2</p>
</article>
<article>
    <p>Paragraph1</p>
    <p>Paragraph2</p>
</article>

CSS：

* {
margin: 0;
padding: 0;
}

#container {
position: absolute;
left: 0;
top: 0;
bottom: 0;
white-space: nowrap;
}

article {
-moz-column-width: 200px;
-webkit-column-width: 200px;
column-width: 200px;
padding: 10px;
height: 100%;
display: inline-block;
white-space: normal;
border: 1px solid #000;
}

p {
padding-bottom: 10px;
}

Answer 1

首先，我将容器的宽度设置为 100% 以阻止它变得超宽：

#container {
    …
    width: 100%;
}

然后，当您添加填充时，个别文章有点太高了。设置为 box-sizing:border-box; 使高度还包括填充：

article {
    …
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

请参阅http://jsfiddle.net/tMtup/4/或http://jsfiddle.net/tMtup/4/show/