1

これは、同じサイズの 3 列のページを作成する方法です。

<div class="wrapper">
   <div style="width:33%;float:left;background-color:red;"></div>
    <div style="width:33%;float:left;background-color:green;"></div>
   <div style="width:33%;float:left;background-color:blue;"></div>
</div>

width:33%より正確な数値の使用と入力を避ける方法はありますか? 私はjavascriptオプションで大丈夫です。

4

3 に答える 3

1

これは、CSS3calc()プロパティを使用して実現できます。

CSS :

div.column {
    width: 33.33%; /* Fallback in case the browser does not support calc() */
    width: -webkit-calc(100% / 3); /* Chrome 19 and above */
    width:    -moz-calc(100% / 3); /* Firefox 4 and above */
    width:         calc(100% / 3); /* IE 9 and above */
}

HTML :

<div class="wrapper">
   <div class="column" style="float:left;background-color:red;"></div>
   <div class="column" style="float:left;background-color:green;"></div>
   <div class="column" style="float:left;background-color:blue;"></div>
</div>

JS フィドルの例

ブラウザ対応表

于 2013-02-16T18:06:21.947 に答える
1

まず、これらのスタイルを html から取得します。

<body>
    <section class="main-content">
        <div class="colum01">Column01</div>
        <div class="colum02">Column01</div>
        <div class="colum02">Column01</div>
    </section>
</body>

あなたのCSSで：

.main-content {
    width: 100%;
    float: left;
    overflow: hidden;
}

.column01 {
    width: 33%;
    float: left;
    background-color: red;
}

.column02 {
    width: 34%;
    float: left;
    background-color: orange;
}

.column03 {
    width: 33%;
    float: left;
    background-color: yellow;
}

または、33.3 と 33.4 と 33.3% を使用できます。

私は誰もがborder-boxを使用していると仮定し続けています.これは、パディングを開始するとすべてが魔法になります. 外側ではなくボックスの内側にパディングをプッシュするため、すべてのパディングと幅を合計して 100% にすることを心配する必要はありません。

ポール・アイリッシュの話題

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

リストを使用して列に項目を表示している場合は、:nth で各列の 3 番目の項目をターゲットにして、それらの項目のみに 33.4% を設定できます... calc の使用は現時点では広くサポートされておらず、javaScript の使用はまだスタイルを作成します。そのため、物事をできるだけシンプルにすることをお勧めします。これは私にとってとてもうまくいきます。(そして、3 つすべてで 33.3% を使用したときに表示される厄介な小さな黒い線を取り除きます。

于 2013-02-16T18:51:47.607 に答える
0

直接使用できませんwidth:33.33%か？それは不可能ではありません。display: table.画面サイズがわかっている場合は、テーブルを使用すると非常に効果的です。ただし、レスポンシブテーブルはまだ作成中です

デスクトップおよびモバイルブラウザでのCSSテーブル表示をサポートするための互換性テーブル。CSSテーブルに関連するいくつかのIE7の修正はここにあります。

于 2013-02-16T17:56:27.673 に答える