HTML-дочерние узлы HTML не выравниваются

Question

Я редактирую базовый шаблон Wordpress и хочу иметь переднюю страницу с несколькими столбцами (показывающую 2 набора статей для каждой строки). Я сделал следующее в CSS:

.front-page-container article:nth-child(odd) { 
     width:50%; 
     float:left; 
     clear:both; 
} 
.front-page-container article:nth-child(even) { 
     width:50%; 
     float:right; 
} 

где front-page-contaner является классом вмещающих дел. HTML-структура:

<div class="front-page-container"> 
    <article id="post-1"></article> 
    <article id="post-2"></article> 
    <article id="post-3"></article> 
    <!-- etc --> 
</div> 

Я хочу, чтобы выровнять сообщение 1 & 2 в одной и той же линии, и имеют возможность отправлять 3 (и 4) на следующей строке.

В то время как работы типа CSS, два сообщения, которые я хочу вместе, не выстраиваются в линию, как показано на рисунке. Я попытался настроить ширину в случае, если бы произошло какое-то перекрытие, но это не устраняет проблему (хотя они становятся заметно меньше).

Любая помощь/указатели будут оценены :)

Answer 1

.front-page-container::after { clear: both } 

.front-page-container * { 
    box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
} 

.front-page-container article:nth-child(odd) { 
     width:50%; 
     float:left; 
} 
.front-page-container article:nth-child(even) { 
     width:50%; 
     float:right; 
} 

Это должно сделать это. Размер окна делает ширину divs вычислением ширины минус заполнение и границы. Поэтому никакая отступы или границы не будут добавляться к объявленной ширине. (Я думаю, что это лучший способ объяснить это).Псевдоэлемент :: after после каждого контейнера очищает любые поплавки.

В качестве бонуса я добавлю, что эта статья помогла мне immensily этой теме:

http://css-tricks.com/dont-overthink-it-grids/

Answer 2

Это прекрасно работает для меня: http://codepen.io/skimberk1/pen/6127d1c3a4961de1f9c1ef20d5400d0f.

Я понятия не имею, что может быть неправильным в вашем случае. Может быть, какой-то другой CSS влияет на него?

Использование CSS box-sizing: border-box; может помочь, так как оно делает так, чтобы максимальная ширина (включая прописку и границу) определяла указанную вами ширину (в данном случае 50%);

Answer 3

Проблема заключается в том clear: both, как прочитанный в CSS schools,

Нет плавающих элементов не допускается на левой или правой стороне указанного пункта.

Вот пример, который можно использовать как ясный: Understanding the CSS Clear Property.

Хотя поплавок является старым решением, используемым для растягивания контейнера, как можно здесь: Clearing floats.

Решение: удалите это, если вы можете или отредактировать вопрос, чтобы сказать, почему его там (и не может быть снято), чтобы мы могли помочь вам дальше.

Answer 4

Вы опубликовали код, который работает должным образом. См http://jsfiddle.net/XqDn6/1/

Проблема, скорее всего, некоторый запас/обивка на article элементов, вызывающих ширину каждого элемента превышает 50%, и поэтому не будучи в состоянии соответствовать 2 в строке ..

Одним из способов решения эта проблема заключается в использовании box-sizing: border-box, что означает, что границы/paddings включены в значение width.

.front-page-container article{ 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

Демо с пограничными/отступов и box-sizing: http://jsfiddle.net/XqDn6/2/