如何使用CSS而不是表格使两个div并排显示？

Question

如何让两个div并排出现？我希望第一个div显示在左侧,第二个显示在右侧.

<div class="first">first</div>
<div class="second">second</div>

我想要的是:

第一秒

我得到了什么:

第一

秒

表格解决方法:

<table>
    <tr>
        <td>first</td>
        <td>second</td>
    </tr>
</table>

如何使两个div表现得像这两个表格单元格？

Answer 1

你只需要向你的第一个div添加浮动,它就会起作用!

Answer 2

您可以使用

 float:left

Answer 3

基本上有2种技巧.

使用float.为元素指定一个浮点值(left| right),它们将一个接一个地跨越,就像基于可用空间的内联元素一样. 缩小:浮动打破了页面的正常流程,因此您必须使用clearfix方法将父容器作为其内容.(其实不是那么糟糕)
使用inline-block.分配display:inline-block给您的块元素,使它们一个接一个地跨越,就像基于可用空间的"内联"元素一样. 缩小:标记中的每个"新行"都被视为具有内嵌块元素的白色空间,从而导致视图中元素之间的间隔.而且,在IE7中不支持将'inline-block'分配给'inline-block'元素,因此你必须使用方法来克服这个差距,以及IE7 Hack.

我其实更喜欢这种inline-block方法.