0

テーブルなしで、次のように3つまたは4つの要素を相互に整列させる方法はありますか？

http://i.imgur.com/fvPQw.png

現在私はテーブルを使用しているので、これを尋ねますが、テーブルは「テスト」ボックスを特定の高さにし、フィラーを実際にスペースを埋めるものにすることを許可していません。現在、フィラーは指定された高さしか許可されておらず、「テスト」ボックスが残りのすべてのスペースを埋める必要があります。テーブルの一番下の行の高さを設定する方法を見つけることができれば、それも答えとして受け入れますが、これを行うための最良の方法はおそらくcssレイアウトを使用することだと思いました

4

2 に答える 2

2

はい。一連のdivを使用して、スクリーンショットのようなテーブルのようなレイアウトを模倣できます。

たとえば、HTMLレイアウトは次のようになります。

<div class="header"><p>Top bar</p></div>
<div class="wrapper">
    <div id="leftCol">
        <div id="topLeft">Top Left</div>
        <div id="centerLeft">Filler</div>
        <div id="bottomLeft">Test</div>
    </div>

    <div id="rightCol">
        <p>SPAM!</p>                
        <div class="clear"></div>
    </div>
</div>​

次に、次のようなスタイリングを適用します。

.clear {
    clear: both;
}


#leftCol {
    float: left;
    width: 300px; /* explicit width on left column */
}

#topLeft {
    height: 100px; /* arbitrary height of top left spot; do not define for auto-sizing */
}

#centerLeft {
    height: 50px; /* another arbitrary height */
}

#bottomLeft {
    height: 200px; /* another arbitrary height */
}

</ p>

例としてJSFiddleを作成しました。基本的に、左側に「左側の列」をフローティングし、右側にコンテンツを存在させます。

于 2012-08-09T18:51:49.200 に答える
0

はい、各divの左マージンと幅を同じに設定してください。上下のマージンを変更して、好みに合わせることができます。このようにして、任意のdivの高さを変更することもできます

于 2012-08-09T18:42:39.893 に答える