php - 流体/液体レイアウト-両側にパディング/マージンがある複数の列

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のcalc関数を使用して簡単に実行できます。これを試して：

.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;
}

calc（）を使用して、サイズをピクセル単位で、またはパーセンテージをcss単位で計算できます。nth-childは、3列ごとにマージンを削除するのに役立ちます（3列の行が複数ある可能性があると想定しています）。

Answer 2

これはあなたのcss

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

wrapperしかし、結局のところ、内部に要素を作成する必要がありますone-third div

それは<div class="clrboth"></div>

そしてcssのためclrbothに

.clrboth{clear:both;}

実例はhttp://jsfiddle.net/Jed8D/2/です [注：幅が狭いため、フィドルでは幅が異なる場合があります。1ページで確認してください。]

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>