css - 具有固定边距的响应式/流体 4 列

Question

对于我的生活，我无法解决为什么我的 4 col 布局被破坏，有人可以帮我修复吗？当您缩小浏览器时，布局更改为 3 列，我需要在所有屏幕尺寸下都为 4 列。

它是一个流动宽度('max-width: 1056px')，固定边距为'12px'。 http://jsfiddle.net/KwUcG/1/

我不想使用“@media”和断点，因此我使用了最大宽度和百分比。

HTML

<section id="organisations">

<div class="wrap">
    <div class="inner">
        <div class="fourcol">
            <div class="block">
                <img src="img/fitzwilliam-museum.jpg" />
                <p>Home to half a million objects of art and archaeology from pre-history to the present day.</p>
            </div>
        </div>
        <div class="fourcol">
            <div class="block">
                <img src="img/fitzwilliam-museum.jpg" />
                <p>Home to half a million objects of art and archaeology from pre-history to the present day.</p>
            </div>
        </div>
        <div class="fourcol">
            <div class="block">
                <img src="img/fitzwilliam-museum.jpg" />
                <p>Home to half a million objects of art and archaeology from pre-history to the present day.</p>
            </div>
        </div>
        <div class="fourcol">
            <div class="block">
                <img src="img/fitzwilliam-museum.jpg" />
                <p>Home to half a million objects of art and archaeology from pre-history to the present day.</p>
            </div>
        </div>
    </div>
</div>

</section>

CSS

.wrap {
padding: 0 40px;
margin: 0 auto;
background: #e4f;
overflow: hidden;
}

.inner {
    max-width: 1056px;
    margin: 0 auto;
    background: #34e;
    overflow: hidden;
}

.fourcol {
display: inline-block;
width: 24%;
margin-left: 12px;
background: #ccc;
}

.fourcol:first-child { margin-left: 0; }

Answer 1

http://jsfiddle.net/KwUcG/2/

适用于 float: left;

您会遇到的另一个问题是您需要使用 % 边距。

我建议使用 1% 的边距和 25% 的宽度列。添加 box-sizing: border-box;修复 float 时的框大小问题。

.wrap {
    padding: 0 40px;
    margin: 0 auto;
    background: #e4f;
    overflow: hidden;
}

    .inner {
        max-width: 1056px;
    width: 100%;
        margin: 0 auto;
        background: #34e;
        overflow: hidden;
    box-sizing: border-box;
    }

.fourcol {
    float: left;
    width: 24%;
    margin-left: 1%;
    margin-right: 0;
    background: #ccc;
    box-sizing: border-box;
}

.fourcol:first-child { margin-left: 0; }

不能使用固定 margin 的原因:

以1056px宽度为例。 1056px 的 24% = 253.44 乘以 4 列 = 1013.76 + 3 列的 12px 边距空间等于 1013.76 + 36 = 1049.76。在这种情况下，这会保留一些空间。

但以 800px 宽为例......

800 像素的 24% = 192 乘以 4 列 = 768 + 36(3 列相当于 12 像素的边距空间)= 804 像素

804px 大于 800px 的 100%，因此它中断了。您可以通过将 24 减少到 23 或 22 或 21 来在一定程度上避免这种情况...但是您正在失去大宽度的房地产。

当使用 % 边距时，一切加起来...