Html 如何水平对齐两个div？

How can I align two divs horizontally?

提问by DaveDev

I need to align two divs next to each other, so that each contains a title and a list of items, similar to:

我需要将两个 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>

It's remarkably easy to do with tables, but I don't want to use tables. How can I achieve this?

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

回答by Robusto

Float the divs in a parent container, and style it like so:

在父容器中浮动 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>

回答by Antoine Neff

Nowadays, we could use some flexboxto align those divs.

现在，我们可以使用一些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>

回答by coderex

<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 must be used so as to prevent the float bug (height warping of outer Div).

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

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

回答by Sarfraz

You need to float the divsin required direction eg leftor right.

您需要在所需方向上浮动 div，例如left或right。

回答by Brant

Wrap them both in a container like so:

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

.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>

回答by DisgruntledGoat

Add a class to each of the divs:

为每个 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>

That's a generic percentages solution - using pixel-based widths is usually much more reliable. You'll probably want to change the various margin/padding sizes too.

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

You can also optionally wrap the HTML in a container div, and use this CSS:

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

.container {
  overflow: hidden;
}

This will ensure subsequent content does not wrap around the floated elements.

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

回答by A.B.

if you have two divs, you can use this to align the divs next to each other in the same row:

如果您有两个 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>

回答by infantry

floatis obsolete, better use display: flex;:

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

example :

例子 ：

.parent-div{ dispaly: flex; }

.parent-div{ dispaly: flex; }

indicate the direction by flex-direction: row/column;. go down if no space by flex-wrap: wrap/nowrap;

指示方向flex-direction: row/column;。如果没有空间就往下走flex-wrap: wrap/nowrap;

more properties here.

更多属性在这里。

回答by Rémi Doolaeghe

For your purpose, I'd prefer using position instead of floating:

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

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

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

Use a parent with relative position:

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

position: relative;

And children in absolute position:

和绝对位置的孩子：

position: absolute;

In bonus, you can better drive the dimensions of your components.

作为奖励，您可以更好地驱动组件的尺寸。

回答by Pratik Deoghare

<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>