Как ограничить количество дочерних div, отображаемых в строке?

Вопрос:

Есть ли способ использовать CSS3 для ограничения количества дочернего div, отображаемого в строке (или в строке)?

<div class=»parent»> <div class=»child»> <img> <p>Text explaining img</p> </div> <div class=»child»> <img> <p>Text explaining another img</p> </div> <!— If I only want two per line, let push the next two down —> <div class=»child»> <img> <p>Text explaining another img</p> </div> <div class=»child»> <img> <p>Text explaining another img</p> </div> </div>

Я рассмотрел только применение ширины и полей, но я также хочу, чтобы последний ребенок подряд имел margin-right: 0;

Есть идеи?

Лучший ответ:

Если вы знаете размер своих элементов, вы можете сделать это следующим образом:

.parent { border: 2px solid #c00; padding: 4px; display: inline-block; } .child { border: 2px solid #0c0; padding: 4px; display: block; width: 64px; height: 64px; margin: 0 76px 0 0; } .child:nth-child(2n) { margin: -76px 0 0 76px; }

http://jsfiddle.net/b4f5c/

Ответ №1

Вы должны использовать jquery или javascript для отображения следующих 2 детей

css3 имеет свойство nth-child, но вы можете отображать только определенные дети только с этим свойством.

Это решение с jquery

var dispdivs=0; function minview() $(«.child»).hide();// hide all child elements dispdivs+=2; for(var i=0;i<dispdivs;i++) //this is to display extra 2 divs { $(«.child:eq(«+i+»)»).show(); } }

когда вы хотите показать все элементы, используйте

$(«.child»).show();