Как сосредоточиться на жидких divs, которые также имеют максимальную ширину?

Рассмотрим следующую установку:Как сосредоточиться на жидких divs, которые также имеют максимальную ширину?

CSS:

#container { 
    position: relative; 
    width: 95%; 
    margin: 0 auto; 
    height: 100%; 
} 

.parent { 
    position: relative; 
    width: 100%; 
    height: auto; 
    float: left; 
    clear: left; 
}  

.child { 
    float: left; 
    width: 50%; 
    max-width: 200px; 
}

HTML:

<body> 
    <div id="container"> 
     <div class="parent"> 
     <div class="child"></div> 
     <div class="child"></div> 
     </div> 
     <div class="parent"> 
     <div class="child"></div> 
     <div class="child"></div> 
     </div> 
    </div> 
<body>

Если ширина окна больше 400px, то .child элементы не будут сосредоточены, но будет достаточно придерживаться влево.

Я не могу знать количество элементов .child заранее (но число внутри каждого родителя всегда будет одинаковым для всех элементов .parent). Если есть больше, я использую JS для вычисления и назначения новых процентов к их ширине в любом случае, поэтому они все равно остаются отзывчивыми (поэтому, если у меня есть 2 дочерних элемента, их ширина будет 50%, если у меня четыре их ширины будут 25% и т. Д.) ,

Есть ли способ сохранить элементы .child с помощью вышеуказанной настройки?

Благодарим за помощь. :-)

источник

2014-10-31 Sprout Coder

Добавить text-align: center в .parent, удалить float и изменить display свойство inline-block на ребенка.

.parent { 
    position: relative; 
    width: 100%; 
    height: auto; 
    float: left; 
    clear: left; 
    text-align: center; 
}  

.child { 
    display: inline-block; 
    width: 50%; 
    max-width: 200px; 
}

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

<div class="child"></div 
><div class="child"></div>

ле CodePen: http://codepen.io/erquhart/pen/ukHco

источник

2014-10-31 01:30:19

Как сосредоточиться на жидких divs, которые также имеют максимальную ширину?

ответ

Смежные вопросы