Как выровнять два 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>

Это замечательно легко сделать с таблицами, но я не хочу использовать таблицы. Как я могу достичь этого?

Ответы

Ответ 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>

Ответ 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>

Сброс должен использоваться, чтобы предотвратить поплавковую ошибку (деформация высоты внешнего Div).

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

Ответ 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>

Ответ 4

Вам нужно плавать 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>

Ответ 7

Если у вас есть два 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>

Ответ 8

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

Ответ 9

Для вашей цели я предпочел бы использовать позицию вместо float:

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

Используйте родительский элемент с относительным положением:

position: relative;

И дети в абсолютном положении:

position: absolute;

В бонусе вы можете лучше управлять размерами ваших компонентов.