0

2つの流体divの中央に固定幅のdivがあるレイアウトを作成しようとしています。構成は、ブートストラップ行内に収まる必要があります。どうすればいいですか？

これがイラストです：

ここに画像の説明を入力してください

4

1 に答える 1

1

これはテーブルで簡単に作成できますが、ここに div バージョンがあります。

<!DOCTYPE>
<html>
    <head>
        <style>
            .d1 {
                background-color: #AAAAFF;
                vertical-align: top;
                margin-right: -75px;
                display: inline-block;
                width: 50%;
                position: relative;
                z-index: 0;
            }

            .d1 .cnt {
                padding-right: 75px;
            }

            .d2 {
                background-color: #AAFFAA;
                vertical-align: top;
                width: 150px;
                display: inline-block;
                position: relative;
                z-index: 2;
            }

            .d3 {
                background-color: #FFAAAA;
                vertical-align: top;
                margin-left: -75px;
                display: inline-block;
                width: 50%;
                position: relative;
                z-index: 1;
            }

            .d3 .cnt {
                padding-left: 75px;
            }
        </style>
    </head>
    <body>
        <div class="d1"><div class="cnt">I'm trying to create a layout with a fixed width div centered between two fluid divs. The configuration should fit within a Bootstrap row. How would I do this? Here's an illustration:</div></div><div class="d2">I'm trying to create a layout with a fixed width div centered between two fluid divs. The configuration should fit within a Bootstrap row. How would I do this? Here's an illustration:</div><div class="d3"><div class="cnt">I'm trying to create a layout with a fixed width div centered between two fluid divs. The configuration should fit within a Bootstrap row. How would I do this? Here's an illustration:</div></div>
    </body>
</html>

div はインライン ブロックであるため、それらの間にスペースや改行を追加しないでください。

于 2012-09-15T18:47:41.020 に答える