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

Question

如何让两个 div 并排显示？我希望第一个 div 出现在左边，第二个 div 出现在右边。

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

我想要的是：

第一个 第二个

我得到的是：

first

second

用表格解决：

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

如何让两个div的行为像这两个表格单元格？

- Hitesh Shrimali

---

使用带有左右值的 float。 - slash197

请查看此帖子并探索源代码。当左列没有内容时，这里的所有“答案”都将失败。 - tereško

请记住，如果您正在使用CSS浮动属性来对齐div并排，请不要忘记清除浮动，否则父元素将被折叠。请查看此页面以了解如何使用浮动属性完美对齐div标签 - http://www.tutorialrepublic.com/css-tutorial/css-alignment.php - Alex

这个问题并不是一个真正的问题，而是由于没有学习HTML或CSS的基础知识所导致的结果。此外，在SO上有多个重复的问题可以完美地回答这个问题。 - DividedByZero

Answer 1

你只需要在第一个div中添加float left，它就能正常工作！

- Jayesh Amin

---

他需要漂浮两个。 - Mr. Alien

将浮点数添加到两个 div 中。 - Voonic

将标记中定义的“第一个”div浮动即可。 - andrewb

@andrewb 我已经评论了你的答案。 - Mr. Alien

Answer 2

您可以使用

 float:left

DEMO here

- Anusha Honey

---

到目前为止，正确的答案。 - Mr. Alien

Answer 3

基本上有两种技术。

1. 使用 float。将浮动值（left | right）分配给您的元素，它们将根据可用空间像内联元素一样一个接一个地延伸。 缺点：浮动会打破页面的正常流程，因此您必须使用清除浮动方法使父容器与其内容一样长。（实际上并不那么糟糕）

2. 使用 inline-block。将 display:inline-block 分配给您的块级元素，以使它们根据可用空间像“内联”元素一样一个接一个地延伸。 缺点：在标记中的每个“新行”都被视为带有 inline-block 元素的空格，从而在视图中在元素之间造成间隙。此外，在 IE7 中，将“inline-block”分配给“inline-block”元素不受支持，因此您必须使用方法克服间隙和IE7 Hack。

我实际上更喜欢使用 inline-block 方法。

- avrahamcool

---

如果我没记错，在IE7中，inline-block实际上会被渲染为inline，这可能会导致额外的问题（通常也确实会）。无论如何，在大多数项目中都不支持IE7，并且已经有已知解决方案来解决3像素间隙问题。 - tereško

我已经链接了一些关于这些问题以及如何解决它们的好文章。 - avrahamcool

Answer 4

简单来说，使用 float:left; 将div的CSS属性设置为左浮动。

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

并且CSS浮动布局入门教程是了解此技术最好的地方，非常有帮助。

- Sobin Augustine

---

浮动第二个 div 的原因是为了它不一定要延伸到右边的边缘。对吧？ - Bob Stein

@BobStein-VisiBone 这个问题是要让两个 div 并排显示，使第二个 div 紧挨着第一个 div。 - Sobin Augustine

Answer 5

许多方法。你可以像这个fiddle一样将“第一个”/最左边的div浮动。

http://jsfiddle.net/2ENMK/

CSS:

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

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

- andrewb

---

失败并查看此链接：Fails和这个。 - Mr. Alien