Бок о бок divs

Question

Если бы вы взглянули на этот форум http://python-forum.org/pythonforum/, вы могли заметить, что границы, которые имеют разделы Темы и сообщения, коротки. Я пишу форум, и теперь у меня проблема с блоками, которые должны идти бок о бок (точно так же, как эти четыре на вышеупомянутом форуме). Не могли бы вы помочь мне организовать четыре квартала бок о бок, чтобы у моего форума не было такого короткого замыкания.

Answer 1

Это CSS стиль <dd> элемента, который вы запрашиваете:

UL.topiclist DD 
{ 
    PADDING-RIGHT: 0px; 
    DISPLAY: block; 
    PADDING-LEFT: 0px;  
    FLOAT: left; 
    PADDING-BOTTOM: 4px; 
    BORDER-LEFT: #ffffff 1px solid; 
    PADDING-TOP: 4px 
} 

Важно, чтобы получить один его бок о бок является FLOAT: left;.

Краткая вертикальная линия, это только border-left.

Answer 2

Вы должны использовать таблицы.

Есть только несколько случаев, когда использование таблицы разрешено (если вы идете по семантическим правилам html), и это одно. Обзор форумов, количество сообщений и просмотров, последний плакат и т. Д. Представляет собой набор табличных данных. Это безопасно и вполне приемлемо для использования таблиц.

<dl> элемент однако не предназначен для использования таким способом.

Answer 3

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

<style> 
    #div1, #div2 { 
     display: inline-block; 
    } 
</style> 

<div id="wrapper"> 
    <div id="div1"></div> 
    <div id="div2"></div> 
</div>