HTML。单行中的列

Question

如何在一行中建立一列？

现在列是垂直的一个接一个。

例子:

█

█

█

但我需要水平构建它们。

█ █ █

这是一个 link到源代码。

Answer 1

我建议您将它们包装到一些外部 <div>并设置 float: left <div> 的属性(property).

这里是如何做的基本示例。

​HTML代码:

<div class="column"​​​​​​​​​>
   <span>Simply dummy text</span>
</div>

<div class="column">
   <span>Simply dummy text</span>
</div>

<div class="column">
   <span>Simply dummy text</span>
</div>

和CSS :

.column {
   width: 160px;
   height: 200px;
   background-color: #eeeeee;
   float: left;
   margin-left: 5px;
   text-align: center;
}​

注意:这是jsfiddle中的工作示例.

注2:另外如果你想使用这个class所以只针对 <div>元素，将其声明为 div.column . 的

更新: 感谢 @poncha 的建议。答案已更新。