我怎样才能水平对齐两个div？ [英] How can I align two divs horizontally?

问题描述

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

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

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

推荐答案

在父容器中浮动div，并且像这样设置样式：

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

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

这篇关于我怎样才能水平对齐两个div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！