Как выровнять два div по горизонтали?

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

source list
destination list

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

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

 .aParent div { float: left; clear: none; } 
 
source list
destination list
 
source list
destination list

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

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

В настоящее время мы можем использовать некоторый flexbox для выравнивания этих div.

 .container { display: flex; } 
 
source list
destination list

Вам необходимо поплавать в нужном направлении, например, left или right .

Оберните их обоих в контейнер следующим образом:

 .container{ float:left; width:100%; } .container div{ float:left; } 
 
source list
destination list

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

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

Добавьте class в каждый из div:

 .source, .destination { float: left; width: 48%; margin: 0; padding: 0; } .source { margin-right: 4%; } 
 
source list
destination list
      
source list
destination list

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

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

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

 position: relative; 

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

 position: absolute; 

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