css - 响应式/流体4列，固定边距

对于我的一生，我无法锻炼为什么我的4列布局中断，有人可以帮我解决吗？当您使浏览器变小时，布局更改为3列，在所有屏幕尺寸下，我都需要为4列。

固定宽度为“ 12px”的可变宽度（“最大宽度：1056px”）。 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; }

最佳答案

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

与float一起工作正常：左；

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

我建议使用25％宽度的列使用1％的边距。添加框大小：border-box;修复了浮动时框大小调整的问题。

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

无法使用固定边距的原因：

以1056px宽度为例。 1056像素的24％= 253.44乘以4列= 1013.76 + 3列价值12px的空白空间是1013.76 + 36 = 1049.76。在这种情况下，这可以保留一些空间。

以800像素宽的示例为例...

800px的24％= 192乘以4列= 768 + 36（3列的12px边距）= 804px

804px大于800px的100％，因此会中断。您可以通过将24减少到23或22或21来在某种程度上避免这种情况。但是，那么您就失去了宽阔的房地产。

使用％保证金时，所有内容加起来...

关于css - 响应式/流体4列，固定边距，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15140496/