如何水平对齐两个div？ [复制]答案

【问题标题】：How can I align two divs horizontally? [duplicate]如何水平对齐两个div？ [复制]
【发布时间】：2011-01-25 21:42:51
【问题描述】：

我需要对齐两个相邻的 div，这样每个 div 都包含一个标题和一个项目列表，类似于：

<div>
    <span>source list</span>
    <select size="10">
        <option />
        <option />
        <option />
    </select>
</div>

<div>
    <span>destination list</span>
    <select size="10">
        <option />
        <option />
        <option />
    </select>
</div>

使用表格非常容易，但我不想使用表格。我怎样才能做到这一点？

【问题讨论】：

@TylerH，这是在提出这个问题近一年后提出的问题的重复项？
问题的年龄只是作为重复问题结束时要考虑的一个方面；要考虑的更重要的方面是哪个问题有更好的答案，并且不仅涵盖了第二个问题，还涵盖了其他问题。这被称为规范问题。在这种情况下，有 8 个答案说“float”和 2 个说“使用 flexbox”。另一个问题包含涵盖这两个以及更多的解决方案，使其成为更好的目标。

标签： html css

【解决方案1】：

在父容器中浮动 div，并设置如下样式：

.aParent div {
    float: left;
    clear: none; 
}

<div class="aParent">
    <div>
        <span>source list</span>
        <select size="10">
            <option />
            <option />
            <option />
        </select>
    </div>
    <div>
        <span>destination list</span>
        <select size="10">
            <option />
            <option />
            <option />
        </select>
    </div>
</div>

【讨论】：

如果你给一个元素一个浮点数，最好也给它一个clear:none是多余的。
当一些较旧的浏览器并不总是强制使用带有浮点数的 clear:none 时回答了这个问题。

【解决方案2】：

现在，我们可以使用一些 flexbox 来对齐这些 div。

.container {
    display: flex;
}

<div class="container">
    <div>
        <span>source list</span>
        <select size="10">
            <option />
            <option />
            <option />
        </select>
    </div>

    <div>
        <span>destination list</span>
        <select size="10">
            <option />
            <option />
            <option />
        </select>
    </div>
</div>

【讨论】：

谢谢，不知道display: flex。添加了链接，以便人们可以轻松看到 CSS3 背景。
Even Edge 也能正确实现！铬，瓦塔常见问题解答？！版本 79.0.3945.88（官方构建）（64 位）[不工作...]
在 Opera 中也是如此[不工作]！
2021 年，所有现代浏览器都支持 flex。谢谢

【解决方案3】：

<div>
<div style="float:left;width:45%;" >
    <span>source list</span>
    <select size="10">
        <option />
        <option />
        <option />
    </select>
</div>

<div style="float:right;width:45%;">
    <span>destination list</span>
    <select size="10">
        <option />
        <option />
        <option />
    </select>
</div>
<div style="clear:both; font-size:1px;"></div>
</div>

必须使用clear，以防止浮动错误（外部Div的高度翘曲）。

style="clear:both; font-size:1px;

【讨论】：

最后嵌套的div有什么作用？为什么clear:both？为什么font-size:1px？
清除浮动。我相信“字体大小：1px”是 IE 兼容的东西。我可能是错的。

【解决方案4】：

您需要按要求的方向float the divs，例如left 或right。

【讨论】：

【解决方案5】：

将它们都包装在一个容器中，如下所示：

.container{ 
    float:left; 
    width:100%; 
}
.container div{ 
    float:left;
}

<div class='container'>
    <div>
        <span>source list</span>
        <select size="10">
            <option />
            <option />
            <option />
        </select>
    </div>
    <div>
        <span>destination list</span>
        <select size="10">
            <option />
            <option />
            <option />
        </select>
    </div>
</div>

【讨论】：

容器本身不必浮动。

【解决方案6】：

为每个 div 添加一个类：

.source, .destination {
    float: left;
    width: 48%;
    margin: 0;
    padding: 0;
}
.source {
    margin-right: 4%;
}

<div class="source">
    <span>source list</span>
    <select size="10">
        <option />
        <option />
        <option />
    </select>
</div>
<div class="destination">
    <span>destination list</span>
    <select size="10">
        <option />
        <option />
        <option />
    </select>
</div>

这是一个通用的百分比解决方案 - 使用基于像素的宽度通常更可靠。您可能还想更改各种边距/填充大小。

您还可以选择将 HTML 包装在容器 div 中，并使用以下 CSS：

.container {
  overflow: hidden;
}

这将确保后续内容不会环绕浮动元素。

【讨论】：

【解决方案7】：

float 已过时，最好使用display: flex;：

示例：

.parent-div{ display: flex; }

用flex-direction: row/column;指明方向。 flex-wrap: wrap/nowrap;没有空格就往下走

更多属性here。

【讨论】：

【解决方案8】：

如果你有两个 div，你可以使用它来将同一行中的 div 对齐：

#keyword {
    float:left;
    margin-left:250px;
    position:absolute;
}

#bar {
    text-align:center;
}

<div id="keyword">
Keywords:
</div>
<div id="bar">
    <input type = textbox   name ="keywords" value="" onSubmit="search()" maxlength=40>
    <input type = button   name="go" Value="Go ahead and find" onClick="search()">
</div>

【讨论】：

【解决方案9】：

<html>
<head>
<style type="text/css">
#floatingDivs{float:left;}
</style>
</head>

<body>
<div id="floatingDivs">
    <span>source list</span>
    <select size="10">
        <option />
        <option />
        <option />
    </select>
</div>

<div id="floatingDivs">
    <span>destination list</span>
    <select size="10">
        <option />
        <option />
        <option />
    </select>
</div>

</body>
</html>

【讨论】：

一个id只能使用一次。
它可以多次使用，但不应该。

【解决方案10】：

出于您的目的，我更喜欢使用位置而不是浮动：

http://jsfiddle.net/aas7w0tw/1/

使用具有相对位置的父级：

position: relative;

和孩子处于绝对位置：

position: absolute;

另外，您可以更好地驱动组件的尺寸。

【讨论】：