جعل الانقسامات لديها عرض 20 ٪ مع الحشو بين كل منهما ، ولكن ليس على يسار الأول أو يمين الأخير

Question

دعنا نقول لقد حصلت على هذا التخطيط لبناء:

بافتراض أن النص والشبكة ضمن نفس القسم, وبالتالي تشترك في عرض حوالي 990 بكسل, كيف يمكنني جعل هذه الشبكة ديناميكيا لها أعمدة عرض متساوية, بدون عرض ثابت?

أنا يمكن أن يحدد كل div إلى width:20%, ، ولكن بعد ذلك سيصطفون بجوار بعضهم البعض مباشرة بدلا من التباعد. http://jsfiddle.net/97H3P/

أنا يمكن أن يحدد كل div إلى width: 20%, box-sizing: border-box, ، و padding: 0 20px, ، ولكن بعد ذلك سيكون هناك فجوة 20 بكسل بين حافة الخطوط وحافة الأول والأخير div. http://jsfiddle.net/97H3P/1/

يمكنني إعداد كل div إلى box-sizing: border-box;, width: 20% و padding-right: 20px, ، ثم على شعبة 5 ، تعيين padding-right: 0;, ، ولكن بعد ذلك يكون القسم الخامس أوسع من البقية. http://jsfiddle.net/97H3P/2/

أنا يمكن أن يحدد الأربعة الأولى divمن كل صف إلى box-sizing: border-box;, width:20.8%, ، الخامس إلى width: 16.8%, ، ثم padding-right: 20px بالنسبة لهم جميعا ، لكن هذه الرياضيات تعمل فقط بعرض 990 بكسل. http://jsfiddle.net/97H3P/3/

هل هناك طريقة أفضل للقيام بذلك?لا يمكنني العثور على أي حل أنيق.

شكرا.

تحديث:لبضع دقائق ، كنت مهتما في كس 3 column-count ميزة ، ولكن بعد ذلك أدركت أنه يفعل فقط من أعلى إلى أسفل ، وليس من اليسار إلى اليمين ، وهو كيف أحتاج هذا أمر.

Answer 1

هنا وهناك مثال غير بوستراب لقد رسمت بسرعة.

على الرغم من أنه يستخدم الطبقات التمهيد.

يتم تحقيق الحيلة باستخدام position: relative و box-sizing: border-box

بل هو أيضا استجابة كيندا.

Answer 2

يجب أن نلقي نظرة على فليكس بوكس http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 3

ماذا عن استخدام بعض الانقسامات إضافية كما الفواصل? كمان

أتش تي أم أل

<div></div>
<div class="spacer"></div>
<div></div>
<div class="spacer"></div>
<div></div>
<div class="spacer"></div>
<div></div>
<div class="spacer"></div>
<div></div>

المغلق

div {
    background: #000;
    height: 200px;
    float: left;
    opacity: 0.2;
    width: 18%;
}

div.spacer{
    opacity: 1;
    width: 2.5%;
}