Question

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

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

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

Answer 2

<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以防止浮动bug（外部Div的高度变形）。

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

Answer 3

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

Answer 4

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

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

Answer 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;
}

这将确保后续内容不会包含浮动元素。

Answer 7

如果你有两个div，你可以使用它来在同一行中将div彼此相邻对齐：

＆＃13;

#keyword {
    float:left;
    margin-left:250px;
    position:absolute;
}

#bar {
    text-align:center;
}

＆＃13;

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

＆＃13;

Answer 8

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

示例：

.parent-div{ dispaly: flex; }

用flex-direction: row/column;指示方向。如果flex-wrap: wrap/nowrap;

没有空格，则向下滚动

更多属性here。

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

Answer 10

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

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

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

position: relative;

孩子处于绝对位置：

position: absolute;

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

如何水平对齐两个div？

10 个答案: