Question

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

我正在使用border-box修复恼人的填充问题。

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

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;

使整个东西适合1200px的宽度，但在列之间使用10px“边框”而不是5px。

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

自定义填充 - 在第一列或最后一列右侧以修复缺失的宽度。

但是，如果内容为列提供了不同的高度，则无效。

这就是最终结果的注定方式： Final Result - Photoshop

Answer 1

这是我对该问题的解决方案，其中涉及使设计的总宽度仅宽5px。当我想要1200px宽的设计时，它根本不是最佳的，但它解决了不同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; }

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

1 个答案: