Question

对于我的生活，我无法锻炼为什么我的4 col布局打破了，有人可以帮我解决吗？当你缩小浏览器时，布局会变为3列，我需要在所有屏幕尺寸上都是4列。

它的流体宽度（'max-width：1056px'），固定边距为“12px”。 http://jsfiddle.net/KwUcG/1/

我不想使用'@media'和断点，因此我使用了max-width和百分比。

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;

正常工作

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

我建议使用1％的边距和25％宽度的列。添加box-sizing：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宽度为例。 2456的1056px = 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来避免这种情况......但是你会在大宽度上失去房地产。

当使用％margin时，一切都会加起来......

Answer 2

不幸的是，您还必须使用margin的百分比。当我将.inner缩小到300px时，12px太多，列本身就是70px。尝试使用1％作为保证金，并在宽度上少用（对于浏览器不兼容性），例如23.7％而不是24％

为了澄清，建议的CSS是：

.fourcol {
   display: inline-block;
   width: 23.7%;
   margin-left: 1%;
   background: #ccc;
}

具有固定余量的响应/流体4柱

2 个答案: