1

私の人生では、4列のレイアウトが壊れている理由を理解できません。誰かが私を修正するのを手伝ってもらえますか？ブラウザを小さくすると、レイアウトが3列に変わります。すべての画面サイズで、4列にする必要があります。

その流動的な幅（'max-width：1056px'）と'12px'の固定マージン。http://jsfiddle.net/KwUcG/1/

'@media'とブレークポイントを使用したくないので、max-widthとpercentagesを使用したのはなぜですか。

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/

フロートで正常に動作します：左;

遭遇するもう1つの問題は、％マージンを使用する必要があることです。

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の幅を考えてみましょう。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に減らすことで、これをある程度回避することができます...しかし、その後、広い幅で不動産を失うことになります。

％マージンを使用すると、すべてが合計されます...

于 2013-02-28T16:32:37.803 に答える
0

残念ながら、にもパーセンテージを使用する必要がありますmargin。300pxに縮小する.innerと、12pxが多すぎて、列自体が70pxになります。マージンには1％を使用し、幅には少し少なく（ブラウザの非互換性の場合）、たとえば24％ではなく23.7％を使用してみてください。

明確にするために、推奨されるCSSは次のとおりです。

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