css - 如何使用 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 表现得像这两个表格单元格？

score 8 · Accepted Answer

8

你只需要在你的第一个 div 中添加 float left 就可以了！

于 2013-09-20T06:00:47.060 回答

score 7 · Accepted Answer

7

您可以使用

 float:left

于 2013-09-20T06:04:09.213 回答

score 6 · Accepted Answer

基本上有2种技术。

使用float. 为您的元素分配一个浮动值（left| right），它们将像基于可用空间的内联元素一样一个接一个地跨越。缩小：浮动打破了页面的正常流动，因此您必须使用clearfix方法使父容器与他的内容一样长。（其实还不错）
使用inline-block. 分配display:inline-block给您的块元素，使它们像基于可用空间的“内联”元素一样一个接一个地跨越。 缩小：标记中的每个“换行符”都被视为带有内联块元素的空白，从而导致视图中的元素之间出现间隙。此外，IE7 不支持将 'inline-block' 分配给 'inline-block' 元素，因此您必须使用方法来克服 gap和IE7 Hack。

我实际上更喜欢这种inline-block方法。

score 4 · Accepted Answer

简单，使用float:left;divs css，

<div style="float:left" > </div>
<div style="float:left" > </div>

和CSS Floats 101，了解它的最佳场所，非常有帮助。

score 1 · Accepted Answer

很多种方法。你可以像这个小提琴一样浮动“第一个”/最左边的 div。

CSS：

div.left
{
    float: left;
    border: 1px solid red;
}

div.lefthugger
{
    border: 1px solid blue;
}

5 回答 5