我有一段文字，我试图以视觉上令人愉悦的方式进行布局，但我无法弄清楚。目标是拥有这种布局（参见伪代码）：
<container>
<main />
<column1 /><column2 />
</container
基本上，会有一大段文本，然后在它下面有 2 个较小的文本体，它们是列。这些列将并排放置，位于文本主体下方，它们的组合宽度+它们的填充将与主体+其填充的宽度相同。
目前我正在尝试一种 javascript + CSS 方法，该方法自动将文本分成列，但它无处可去，我无法找到一种视觉上令人愉悦的方式来做到这一点。
你不需要 Javascript，只需要 html 和 css。
您可以执行以下操作：（请参阅此处的代码）
一个基本的html结构：
<div id="container">
<div id="main">
Main
</div>
<div class="column">
Column1
</div>
<div class="column">
Column2
</div>
</div>
元素的 CSS（仅作为示例）：
#container {
display:block;
width:100%;
float:left;
clear:both;
}
#main {
display:block;
clear:both;
border:#000 solid 1px;
}
.column {
display:block;
width:49%;
float:left;
border:#000 solid 1px;
}
这将产生以下结果：
这#Container是“页面”。在本例中，它将填充 100% 的浏览器窗口。如果愿意，您可以将其设置为固定大小（例如，在 CSS 文件Width:960px;中margin:0 auto 0 auto;使其居中）。
顶部的链接转到代码的实时视图。随意玩弄那里的代码。单击运行以更新您的更改。
为了示例，我border:在 CSS 中添加了使框可见（它们添加了宽度，因此示例中的宽度是列的 49%）。
即使您为列设置 50%（=50% + 内边距），内边距也会增加宽度。诀窍是在列 div 内添加另一个 div，仅使用您需要的填充（无宽度），它会根据可用空间自行调整。
希望这可以帮助！