填充重叠但不填充宽度的列答案

【问题标题】：Columns with padding overlapping, but not filling width填充重叠但不填充宽度的列
【发布时间】：2013-07-07 18:19:19
【问题描述】：

我正在创建一个 5 列布局，其中 div 相互重叠，以在它们之间留出 5px 的空间。

我正在使用边框框来解决烦人的填充问题。

问题：列根本不适合宽度，因为我正在使用边距来移动 div 的“hacks”。

JSFiddle

CSS

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
}
.grid:after {
    content: "";
    display: table;
    clear: both;
}

.col-1-5,
.col-2-5,
.col-3-5,
.col-4-5,
.col-5-5 {
    float: left;
    margin-left: -5px;
}
.col-first { clear: left; margin-left: 0; }

.col-1-5 { width: 240px; }
.col-2-5 { width: 480px; }
.col-3-5 { width: 720px; }
.col-4-5 { width: 960px; }
.col-5-5 { width: 1200px; }

.module {
    background: #f1ebe5;
    padding: 5px;
}
.module-content {
    background: #fff;
    height: 320px;
}

.col-3-5 .module-content { /* Middle col has main content, thus higher */
     height: 400px;
}

HTML

<div class="grid">
    <div class="col-1-5 col-first module">
        <div class="module-content">
            240px x 320px
        </div>
    </div>
    <div class="col-3-5 module">
        <div class="module-content">
        720px x 400px
        </div>
    </div>
    <div class="col-1-5 module">
        <div class="module-content">
            240px x 320px
        </div>
    </div>
</div>

删除

margin-left: -5px;

使整个内容适合 1200 像素的宽度，但列之间的“边框”为 10 像素，而不是 5 像素。

我确信有一个非常简单的解决方案，我已经尝试过的事情之一是：

在第一列或最后一列自定义 padding-right 以修复缺失的宽度。

但是对于给列不同高度的内容，这是行不通的。

这就是注定的最终结果：

【问题讨论】：

您可以通过使用zurb基础foundation.zurb.com摆脱为此类网格制作css，它使用网格系统，并且非常易于使用，只需使用它的类就可以了
table 或 css table ，将增长或重新调整它们的布局，td 将相互推动并且永远不会重叠。你只能边缘化里面的东西。怎么样：边框间距：5px？
@IchigoKurosaki 我对使用另一个像基础这样的网格系统不感兴趣。

标签： padding grid-layout border-box css

【解决方案1】：

这是我对该问题的解决方案，其中涉及使设计的总宽度仅宽 5 像素。当我要进行 1200 像素宽的设计时，这根本不是最佳选择，但它解决了不同 div 在相互重叠时不对齐的问题。

JSFiddle

HTML

<div class="col-5-5 module top">
    <div class="module-content">1205px</div></div>

<div class="grid">
    <div class="col-5-5">
        <div class="col-1-5 module col-first ">
            <div class="module-content">
                245px x 320px
            </div>
        </div>

        <div class="col-2-5 module main">
            <div class="module-content">
               585px x 400px
            </div>         
        </div>

        <div class="col-2-5 module col-last">
            <div class="module-content">
                585px x 500px
            </div>
        </div>
    </div>
</div>

CSS

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.grid:after {
    content: "";
    display: table;
    clear: both;
}

.col-1-5 { width: 245px; }
.col-2-5 { width: 485px; }
.col-3-5 { width: 725px; }
.col-4-5 { width: 965px; }
.col-5-5 { width: 1205px; }

.col-1-5,
.col-2-5,
.col-3-5,
.col-4-5 {
    float: left;
    margin-left: -5px;
}
.col-first {
    clear: left;
    margin-left: 0;
}

.module {
    background: #f1ebe5;
    padding: 5px;
}
.module-content {
    background: #fff;
    height: 320px;
}

/* Random stuff to make this example worth something */
.top .module-content { height: 100px; }
.top.module { padding-bottom: 0; }
.main .module-content { height: 400px; }
.col-last .module-content { height: 500px; }

【讨论】：