1

对于我的生活，我无法锻炼为什么我的 4 col 布局会损坏，有人可以帮我解决吗？当您缩小浏览器时，布局更改为 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; }
4

2 回答 2

2

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

适用于 float: left;

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

我建议使用 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 宽度为例。1056px 的 24% = 253.44 乘以 4 列 = 1013.76 + 3 列价值 12px 的边距空间为 1013.76 + 36 = 1049.76。在这种情况下，这适用于剩余的一些空间。

以 800px 宽为例...

800px 的 24% = 192 乘以 4 列 = 768 + 36（3 列相当于 12px 的边距空间）= 804px

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

当使用 % margins 时，一切都加起来......

于 2013-02-28T16:32:37.803 回答
0

unfortunately, you'll have to use percentages for the margin as well. When I shrink the .inner to 300px, 12px is too much, the column itself is 70px. Try using 1% for the margin, and a bit less (for browser incompatibilities) in the width, eg 23.7% instead of 24%

To clarify, the suggested CSS is :

.fourcol {
   display: inline-block;
   width: 23.7%;
   margin-left: 1%;
   background: #ccc;
}
于 2013-02-28T16:30:52.963 回答