padding - 填充重叠但不填充宽度的列

Question

我正在创建一个 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 以修复缺少的宽度。

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

最终结果注定是这样的：

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