Question

我制作网格系统，我遇到了块的“strage”行为例如

HTML：

<div class="l_row">
    <div class="l_cell"></div>
    <div class="l_cell"></div>
    <div class="l_cell"></div>
    <div class="l_cell"></div>
</div>

CSS：

.l_row {
    min-width: 0px;
    width: 100%;
    max-width: 100%;
    margin: 2rem auto;
}
.l_row:before, .l_row:after {
    content: " ";
    display: table;
}
.l_row:after {
    clear: both;
}
.l_cell {
    float: left;
    padding-right: 15px;
    width: 25%;
}
.l_row .l_cell:last-child {
    padding-right: 0px;
}

如果.l_cell有一些内容至少有一个符号1, a,   - 效果很好，但如果.l_cell为空，则会折叠为width:0并忽略width在css

Answer 1

在其中使用&nbsp来实现您的目标。

例如，

<div class="l_cell"> </div>

这将div视为具有内容的块。

希望这有帮助。

Answer 2

...瑶池 https://css-tricks.com/make-sure-columns-dont-collapse-horizontally/

.col {
    border-top: 1px solid white;
    border-bottom: 1px solid white;
    padding-top: 1rem;
    padding-bottom: 1rem;
    min-height: 1px;
}

Answer 3

您的布局可以通过一些小的调整来修复。

（1）如果向.l_cell添加填充，这将增加框宽度，宽度为25％的四个.l_cell块将不适合单行。您可以使用box-sizing: border-box来解决此问题，.l-cell会强制min-height将宽度保持在25％，同时还包括20px右边填充。

（2）“零崩塌宽度”效应是由于浮子的性质造成的。由于未指定高度或最小高度，因此任何没有内容的浮动都将具有零高度但宽度为25％。如果您有一个浮动序列，如示例所示，浮动的左边缘将尽可能位于左侧，直到它们到达前一个浮动的右边缘。如果浮子的高度为零，则它没有右边缘，看起来宽度为零。如果添加.l_row { min-width: 0px; width: 100%; max-width: 100%; margin: 2rem auto; } .l_row:before, .l_row:after { content: " "; display: table; } .l_row:after { clear: both; } .l_cell { box-sizing: border-box; float: left; padding-right: 20px; width: 25%; min-height: 20px; } .l_cell:nth-child(odd) { background-color: beige; } .l_cell:nth-child(even) { background-color: lightblue; } .l_row .l_cell:last-child { padding-right: 0px; }值，则所有浮点数将按预期定位。

<div class="l_row">
    <div class="l_cell">x1</div>
    <div class="l_cell"></div>
    <div class="l_cell">x3</div>
    <div class="l_cell"></div>
</div>

{{1}}

浮动块崩溃

3 个答案: