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

How can I make two div appear side by side? I want the first div appear on left, and second to appear right beside that.

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

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

What I want:

我想要的是：

first second

第一秒

What I get:

我得到了什么：

first

second

第一秒

Workaround with tables:

表格解决方法：

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

How to make two divs behave like these two table cells?

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

5 个解决方案

#1

You just need to add float left to your first div and it will work!

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

#2

you can use

您可以使用

 float:left

DEMO here

DEMO在这里

#3

simple, Use float:left; to the divs css,

简单，使用float：left;到divs css，

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

and CSS Floats 101, best place to make an understandind of it, very helpful.

和CSS浮动101，最好的地方，以了解它，非常有帮助。

#4

basically there are 2 techniques.

基本上有2种技巧。

using float. assign a floating value (left | right) to your elements, and they will span one after each other like inline elements based on available space. Downsize: floating breaks the normal flow of the page, so you'll have to use clearfix methods to make the parent container long as his content. (actually not so bad)

使用浮动。为元素指定一个浮动值（左|右），它们将像一个基于可用空间的内联元素一个接一个地跨越。缩小：浮动打破了页面的正常流程，因此您必须使用clearfix方法将父容器作为其内容。（实际上没那么糟糕）
using inline-block. assign display:inline-block to your block elements to make them span one after each other like 'inline' elements based on available space. Downsize: each 'new-line' in the markup is treated like a white-space with inline-block elements, causing gapes between elements in the view. and also, assigning 'inline-block' to 'inline-block' elements isn't supported in IE7, so you'll have to use methods to overcome the gap, and IE7 Hack.

使用内联块。将显示：内联块分配给块元素，使它们一个接一个地跨越，就像基于可用空间的“内联”元素一样。缩小规模：标记中的每个“新行”都被视为具有内嵌块元素的白色空间，从而导致视图中元素之间的间隔。而且，在IE7中不支持将'inline-block'分配给'inline-block'元素，因此你必须使用方法来克服这个差距，以及IE7 Hack。

I actually prefer the inline-block method.

我实际上更喜欢内联块方法。

#5

Many ways. You could float the "first"/leftmost div like in this fiddle.

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

http://jsfiddle.net/2ENMK/

CSS:

CSS：

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

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

#1