Вопросы Теги

Как я могу выровнять два отделения горизонтально? [дубликат]

Этот вопрос уже имеет ответ здесь:

Я должен выровнять два отделения друг рядом с другом, так, чтобы каждый содержал заголовок и список объектов, подобных:


    source list
    





    destination list

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

44
задан TylerH 20 September 2017 в 18:42
поделиться

6 ответов

Поместите div в родительский контейнер и задайте ему такой стиль: 

 .aParent div {float: left; ясно: нет; } 
 
 
  список источников    
  список назначения
52
ответ дан 26 November 2019 в 21:58
поделиться 
<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;
20
ответ дан 26 November 2019 в 21:58
поделиться

Оберните их оба в контейнер, например so:

.container{ float:left; width:100%; } .container div{ float:left;}
 
 список источника <выбор размер="10"> 
 
  списокведения <выбор размер="10">
2
ответ дан 26 November 2019 в 21:58
поделиться

Добавьте класс в каждый из разделов: 

 .source, .destination {float: left; ширина: 48%; маржа: 0; отступ: 0; } .source {margin-right: 4%; } 
 
  список источников   
 < div class = "destination">  список назначения

Это общий процентное решение - использование ширины на основе пикселей обычно намного надежнее. Возможно, вы захотите также изменить различные размеры полей / отступов.

Вы также можете дополнительно обернуть HTML в контейнер div и использовать этот CSS: 

.container {
  overflow: hidden;
}

Это гарантирует, что последующее содержимое не будет переноситься вокруг плавающих элементов.

1
ответ дан 26 November 2019 в 21:58
поделиться

Вам необходимо разместить блоки div в нужном направлении, например влево или вправо .

4
ответ дан 26 November 2019 в 21:58
поделиться 
<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>
-2
ответ дан 26 November 2019 в 21:58
поделиться