2

私はテーブル派ですが、いくつかの div をドラッグ アンド ドロップする必要があるため、テーブルレス (正しい方法) を試しました。

これは私がやりたいことです： デザイン

すべての要素間のスペースは 24px にする必要があります。私の主な問題は、div (1,2,3) が使用可能なスペースの 100% を占めていることです。幅: 100% メイン コンテナーを超えてそれらを送信します。

これまでの私のコードは次のとおりです。

html

<div id="mainContainer">
<div id="topContainer">Just the top one
</div>
<div id="table">
    <div id="Line1Container">
    <div id="container1" class="container">1
    </div>
    <div id="container2" class="container">2
    </div>
    <div id="container3" class="container">3
    </div>
</div>
<div id="Line2Container">
    <div id="container4" class="container">4
    </div>
    <div id="container5" class="container">5
    </div>
    <div id="container6" class="container">6
    </div>
</div>
</div>
</div>

そして私のCSS

#mainContainer {
    border: 1px solid lightgray;
    position:fixed;
    top: 80px;
    bottom:20px;
    left:80px;
    right:80px;
    overflow-y: scroll;
    overflow-x: hidden;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

#topContainer {
    border: 1px solid lightgray;
    border-radius: 10px;
    margin-left: 24px;
    margin-right: 24px;
    margin-top: 24px;
}

#table {
    display: table;
    margin: 24px;
    width: 95%;
}

#Line1Container, #Line2Container {
    display: table-row;
}

.container  {
    border: 1px solid lightgray;
    display: table-cell;
    width: 33%;
    border-radius: 10px;
}

ご覧のとおり、私は table-cell アプローチを試しましたが、float: left アプローチを試す前に。

ありがとう

4

2 に答える 2

2

フィドル

動的サイズと一緒にpx値を持つ値を適切に使用することはできません。%24px の代わりに x% を使用する必要があります。float: leftそして、「セル」で使用できます

于 2013-05-03T16:03:38.360 に答える