如何使用 CSS 而不是表格让两个 div 并排显示？ [关闭]答案

【问题标题】：How to make two divs appear side by side using CSS not tables? [closed]如何使用 CSS 而不是表格让两个 div 并排显示？ [关闭]
【发布时间】：2017-08-05 22:15:31
【问题描述】：

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

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

我想要什么：

第一秒

我得到了什么：

第一

第二个

使用表格的解决方法：

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

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

【问题讨论】：

将float 与左右值一起使用。
查看this post 并探索源代码。当左栏没有内容时，这里的所有“答案”都会失败。
请记住，如果您使用 CSS 浮动属性来并排对齐 div，请不要忘记清除浮动，否则父元素将被折叠。检查此页面以了解使用 float 属性完美对齐 div 标签 - tutorialrepublic.com/css-tutorial/css-alignment.php
这个问题不是真正的问题，而是没有学习HTML或CSS基础的结果。此外，SO 上有多个重复的问题完美地回答了这个问题

标签： css layout html-table

【解决方案1】：

您只需将 float left 添加到您的第一个 div 即可！

【讨论】：

他需要浮动both
将浮动添加到两个 div
浮动标记中定义的“第一个”div就足够了。
@andrewb 我已经评论了你的回答
哦，这真的很简单。谢谢它的工作！

【解决方案2】：

你可以使用

 float:left

DEMO here

【讨论】：

到目前为止正确答案

【解决方案3】：

基本上有两种技术。

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

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

【讨论】：

IIRC，IE7 中的inline-block 实际上将呈现为inline，这可能（并且通常会）导致其他问题。无论如何，大多数项目中不支持 IE7，3px 间隙有known solutions。
我已经链接到关于这些问题以及如何解决这些问题的好文章。

【解决方案4】：

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

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

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

【讨论】：

浮动第二个 div 的原因是它不一定延伸到右边距。对吗？
@BobStein-VisiBone 问题是让两个 div 并排出现，所以让第二个 div 紧挨着第一个 div。

【解决方案5】：

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

http://jsfiddle.net/2ENMK/

CSS：

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

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

【讨论】：

Fails 见this