0

我正在尝试创建一个包含多个列的响应式布局，这些列均匀地间隔开，在它们的两侧都有 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/

谢谢你。

4

3 回答 3

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 列行）。

于 2013-02-11T10:54:33.583 回答
0

这是你的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/ [注意：小提琴的宽度可以不同，因为它的宽度很小，在单个页面上检查它会按照你的意愿工作。]

于 2013-02-11T09:36:24.510 回答
-1

下面的代码将完成必要的工作，因为它计算页面加载时的列宽。没有硬编码值。

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>
于 2013-02-11T10:37:34.423 回答