0

だから、私はいくつかのコンテンツを別のコンテナにうまく収めようとしています。

私のCSS:(「test」と書かれたボックスはid='resultBox'です）

#resultBox{
    display: block;
    position:absolute;
    width:20%;
    margin:0px;
    padding:0px;
}

しかし、これは見栄えが悪く、すべて窮屈ですが、1行に5つのボックスが必要です。マージンを与えて、幅を自動的に調整する方法はありますか？

写真関連：上は私が望むマージンですが、下は私が望む振る舞いです。 ここに画像の説明を入力してください

4

6 に答える 6

2

新しいブラウザのみをサポートしている場合は、box-sizing: border-box

これには、幅内のパディングと境界線が含まれます。余白を使用せず、境界線を使用して、物事に間隔のある外観を与えます。

参照：https ：//developer.mozilla.org/en/CSS/box-sizing

于 2012-07-25T22:49:41.067 に答える
1

このテーブルレステーブルの実装はどうですか？

http://jsfiddle.net/Wexcode/xKj8n/

<div id="table">
    <div class="row">
        <div><span>Test</span></div>
        <div><span>Test</span></div>
        <div><span>Test</span></div>
        <div><span>Test</span></div>
        <div><span>Test</span></div>
    </div>
</table>

編集：

IE8との互換性を犠牲にしてセレクターを使用する場合は、行なしでこれを行うこともできますnth-child()（JavaScriptを使用してクラスをいつでも適用できます）。

http://jsfiddle.net/Wexcode/xKj8n/2/

<div id="table">
    <div><span>Test</span></div>
    <div><span>Test</span></div>
    <div><span>Test</span></div>
    <div><span>Test</span></div>
    <div><span>Test</span></div>
</div>​
于 2012-07-25T23:09:27.027 に答える
1

outline：を使用して、必要に応じてマージンをシミュレートできます。

#resultBox {
    ...
    outline: 1px solid white;
    ...
}

このようにして、右端のブロックを次の行にぶつけることなく、各ブロックの視覚的な定義を得ることができます。

于 2012-07-25T22:41:34.087 に答える
0

box-sizing: border-box右下の1pxの境界線で使用してみることができますが:nth-child、右端のボックスから余分な1pxを削除するためにも使用する必要があります。

.box
{
    width: 20%;
    float: left;
    border-radius: 3px;
    padding: 5px;
    border-right: solid 1px #fff;
    border-bottom: solid 1px #fff;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #ccc;
}

.box:nth-child(5n)
{
    border-right: 0;
}

http://jsfiddle.net/Pf2LZ/

これは、妥当なブラウザとIE8+で機能するはずです。IE8のみ（私は思う）は、のサポートがないため、右側に余分なピクセルがあり:nth-childます。それが問題である場合は、いつでも5つおきの要素に追加のクラスを追加することができます。

于 2012-07-25T22:53:10.057 に答える
0

表形式のデータを表示しようとしている場合は、実際にはテーブルを使用する必要があります。

td { 
    width: 20%;
    text-transform:uppercase; }

HTML：

<table>
    <tr>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
    </tr>
    <tr>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
    </tr>
</table>
于 2012-07-25T22:54:49.213 に答える
-1

ブラウザの要件はわかりませんが、新しいCSS3Flexboxモジュールを試すことができます。

http://net.tutsplus.com/tutorials/html-css-techniques/an-introduction-to-css-flexbox/

于 2012-07-25T22:51:09.763 に答える