流體/液體佈局 - 多列填充/任何一方的邊距

Question

我想創建一個列數量的響應式佈局，間隔均勻地與他們兩邊的16px填充/邊距。

如果我有3列，每列的寬度自然會被設置爲33％，然而，每列之間有16px的間隙，這會佔到100％以上。

使用CSS，JavaScript或PHP ...我將如何能夠實現這一目標？

body { 
    font: 0.75em Arial, Helvetica, san-serif; 
    background: #CCC; 
} 
p {margin-bottom: 12px;} 
h1 { 
    font: 1.25em Arial, Helvetica, san-serif; 
    font-weight: bold; 
    color: teal; 
    text-transform: uppercase; 
    margin-bottom: 12px; 
} 

#wrapper { 
    background: #FFF; 
    width: 75%; 
    margin: 0 auto; 
    padding: 32px; 
} 

.one-third {???} 

http://jsfiddle.net/Jed8D/

謝謝。

Answer 1

能否通過計算功能輕鬆完成在css3中。試試這個：

.one-third { 
    width: calc((100% - 32px)/3); //Where 100% is the width of container - 32px is the margin between two columns (16px + 16px) - 3 is the number of columns 
    float: left; 
    margin-right: 16px; 
} 

.one-third:nth-child(3n+3){ 
    margin-right: 0px; 
} 

您可以使用計算（）來計算在CSS中的像素大小或百分比。和n-child將幫助刪除每個第三列的保證金（假設您可能有更多的多個3列行）。

Answer 2

這是您的css

.one-third { 
    float: left; 
    padding: 16px; 
    width: 29%; 
} 

，但你需要畢竟one-third div

創建wrapper中的元素是<div class="clrboth"></div>

和css爲clrboth是

.clrboth{clear:both;}

工作的例子是http://jsfiddle.net/Jed8D/2/ [注：寬度可在小提琴可以有所不同，因爲它具有低寬度，檢查它在一個頁面上會工作，只要你想。]

Answer 3

下面的代碼會做要緊，因爲它計算頁面加載的列寬。沒有硬編碼的值。

的Javascript

<script type="text/javascript"> 

$(document).ready(function(){ 

    var wrapperW = $("#wrapper").width(); 

    /* (Wrapper width - gap * nos.of columns) divided by nos.of columns  */ 
    var availableW = Math.floor((wrapperW - 16 * 3)/3);  

    $(".one-third").width(availableW); 

}); 

</script> 

CSS

<style type="text/css"> 

body { 
    font: 0.75em Arial, Helvetica, san-serif; 
    background: #CCC; 
} 

p {margin-bottom: 12px;} 

h1 { 
    font: 1.25em Arial, Helvetica, san-serif; 
    font-weight: bold; 
    color: teal; 
    text-transform: uppercase; 
    margin-bottom: 12px; 
} 

#wrapper { 
    background: #FFF; 
    width: 75%; 
    margin: 0 auto; 
    padding: 32px; 
} 

.one-third { margin:8px; float:left; } /* Important change */ 

</style> 

HTML

<div id="wrapper"> 
<div class="one-third"> 
    <header class="entry-header"> 
     <h1 class="entry-title">Column One Title</h1> 
    </header> 
<p>Phasellus commodo velit risus. Vivamus nunc lectus, molestie vel interdum ut, gravida congue lorem. Sed elementum lorem et dolor gravida in imperdiet quam lacinia. Aenean iaculis, elit vitae iaculis malesuada, nulla risus lobortis nulla, ut lacinia risus enim ut arcu. Duis ac ligula enim, eget consequat odio. Nunc condimentum arcu et erat dignissim at consequat lorem tincidunt. In quis consectetur orci. Quisque elit lectus, feugiat vitae sollicitudin in, lacini a ac velit.</p> 
<p>Nam laoreet purus at turpis sollicitudin ut tincidunt nulla dapibus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin egestas tristique nunc et suscipit. In hac habitasse platea dictumst. Cras nec lacus arcu. Cras ligula quam, facilisis sit amet tristique non, ullamcorper ut dolor.</p> 
<p>Donec posuere mi at urna congue non rutrum leo hendrerit. Nulla tempor vehicula eros, vitae ornare sem ornare eu. Etiam ultricies tristique malesuada. Maecenas pellentesque sem eu metus vulputate molestie. Nullam fringilla mauris eget metus imperdiet vulputate. Vivamus vulputate pretium tortor et commodo. Sed in volutpat lectus. Nam tincidunt blandit nunc, nec tincidunt mauris tempor ut. Nulla eu mattis nisl. Quisque pretium convallis venenatis. Praesent varius orci nec justo posuere porttitor sollicitudin ligula imperdiet. Cras fermentum mauris dolor. Proin at nunc turpis.</p> 
<p>Morbi elit lorem, consectetur sed ullamcorper nec, viverra eu eros. Aenean molestie pellentesque ante facilisis pretium. Donec id mauris urna, at ornare lacus. Phasellus vel mattis magna. Phasellus at nisl ut metus ornare interdum a ac justo. Etiam suscipit lobortis tellus, vel lacinia neque placerat sed. In dictum, dui eget varius laoreet, ante ante semper orci, vel pulvinar mi velit eget lectus. Etiam ut odio ut dui consequat ullamcorper. Vestibulum sollicitudin scelerisque accumsan.</p> 
</div> 

<div class="one-third"> 
    <header class="entry-header"> 
     <h1 class="entry-title">Column Two Title</h1> 
    </header> 
<p>Phasellus commodo velit risus. Vivamus nunc lectus, molestie vel interdum ut, gravida congue lorem. Sed elementum lorem et dolor gravida in imperdiet quam lacinia. Aenean iaculis, elit vitae iaculis malesuada, nulla risus lobortis nulla, ut lacinia risus enim ut arcu. Duis ac ligula enim, eget consequat odio. Nunc condimentum arcu et erat dignissim at consequat lorem tincidunt. In quis consectetur orci. Quisque elit lectus, feugiat vitae sollicitudin in, lacini a ac velit.</p> 
<p>Nam laoreet purus at turpis sollicitudin ut tincidunt nulla dapibus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin egestas tristique nunc et suscipit. In hac habitasse platea dictumst. Cras nec lacus arcu. Cras ligula quam, facilisis sit amet tristique non, ullamcorper ut dolor.</p> 
<p>Donec posuere mi at urna congue non rutrum leo hendrerit. Nulla tempor vehicula eros, vitae ornare sem ornare eu. Etiam ultricies tristique malesuada. Maecenas pellentesque sem eu metus vulputate molestie. Nullam fringilla mauris eget metus imperdiet vulputate. Vivamus vulputate pretium tortor et commodo. Sed in volutpat lectus. Nam tincidunt blandit nunc, nec tincidunt mauris tempor ut. Nulla eu mattis nisl. Quisque pretium convallis venenatis. Praesent varius orci nec justo posuere porttitor sollicitudin ligula imperdiet. Cras fermentum mauris dolor. Proin at nunc turpis.</p> 
<p>Morbi elit lorem, consectetur sed ullamcorper nec, viverra eu eros. Aenean molestie pellentesque ante facilisis pretium. Donec id mauris urna, at ornare lacus. Phasellus vel mattis magna. Phasellus at nisl ut metus ornare interdum a ac justo. Etiam suscipit lobortis tellus, vel lacinia neque placerat sed. In dictum, dui eget varius laoreet, ante ante semper orci, vel pulvinar mi velit eget lectus. Etiam ut odio ut dui consequat ullamcorper. Vestibulum sollicitudin scelerisque accumsan.</p> 
</div> 

<div class="one-third"> 
    <header class="entry-header"> 
     <h1 class="entry-title">Column Three Title</h1> 
    </header> 
<p>Phasellus commodo velit risus. Vivamus nunc lectus, molestie vel interdum ut, gravida congue lorem. Sed elementum lorem et dolor gravida in imperdiet quam lacinia. Aenean iaculis, elit vitae iaculis malesuada, nulla risus lobortis nulla, ut lacinia risus enim ut arcu. Duis ac ligula enim, eget consequat odio. Nunc condimentum arcu et erat dignissim at consequat lorem tincidunt. In quis consectetur orci. Quisque elit lectus, feugiat vitae sollicitudin in, lacini a ac velit.</p> 
<p>Nam laoreet purus at turpis sollicitudin ut tincidunt nulla dapibus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin egestas tristique nunc et suscipit. In hac habitasse platea dictumst. Cras nec lacus arcu. Cras ligula quam, facilisis sit amet tristique non, ullamcorper ut dolor.</p> 
<p>Donec posuere mi at urna congue non rutrum leo hendrerit. Nulla tempor vehicula eros, vitae ornare sem ornare eu. Etiam ultricies tristique malesuada. Maecenas pellentesque sem eu metus vulputate molestie. Nullam fringilla mauris eget metus imperdiet vulputate. Vivamus vulputate pretium tortor et commodo. Sed in volutpat lectus. Nam tincidunt blandit nunc, nec tincidunt mauris tempor ut. Nulla eu mattis nisl. Quisque pretium convallis venenatis. Praesent varius orci nec justo posuere porttitor sollicitudin ligula imperdiet. Cras fermentum mauris dolor. Proin at nunc turpis.</p> 
<p>Morbi elit lorem, consectetur sed ullamcorper nec, viverra eu eros. Aenean molestie pellentesque ante facilisis pretium. Donec id mauris urna, at ornare lacus. Phasellus vel mattis magna. Phasellus at nisl ut metus ornare interdum a ac justo. Etiam suscipit lobortis tellus, vel lacinia neque placerat sed. In dictum, dui eget varius laoreet, ante ante semper orci, vel pulvinar mi velit eget lectus. Etiam ut odio ut dui consequat ullamcorper. Vestibulum sollicitudin scelerisque accumsan.</p> 
</div> 

<br style="clear:both;" /> <!-- Important Addition --> 

</div>