0

私は現在、Sass と Less に移行する前に、自分の個人的な使用のために独自の小さな流動グリッドを構築しています。これは、その背後にあるより単純な手順のいくつかを理解したいため、大きなフレームワークは必要ないためです。私がやろうとしているのは、ページに基づいて列を中央に配置することです。ラッパーは画面の幅の 90% しか使用しないため

<body>
    <div class="wrapper">
        <div class="Column">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.</p>
        </div>

        <div class="Column">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.</p>
        </div>

        <div class="Column last">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.</p>
        </div>
    </div>
</body>

CSS

body{
    text-align:center;
}

.wrapper{
    margin: 0 auto;
    width : 90%;
}

.Column{
    float : left;
    width : 22%;
    margin-right : 4%;
}

.last{
    margin-right : 0;
}

ここで、列を中央に配置したい小さなテストをセットアップしましたhttp://jsfiddle.net/rjtK9/

4

2 に答える 2

1

ラッパーはすでに中央に配置されています。列はラッパー内で左に浮いています。したがって、おそらく列のサイズを大きくする必要があります。

.Column{
    float : left;
    width : 30%;
    margin-right : 4%;
}
于 2013-04-21T12:48:36.463 に答える
1

それはすでに中央に配置されています。あなたは幅
を与えるのに2つの保守的でした。私は小さなフィドルを立てました。

私がしたことは、列に 33% の幅を与え、右側に 20 ピクセルのガターを与えることでした。次のcssを追加します

-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box;   
 box-sizing: border-box;

上記のコードには、幅 33% のパディングが含まれています。
ボックスサイズチェックの詳細については、こちらを確認してください

于 2013-04-21T12:51:00.223 に答える