Question

我正在尝试创建一个布局，其中固定宽度div位于两个流体div之间。配置应该适合Bootstrap行。我该怎么做？

以下是插图：

enter image description here

Answer 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是内嵌块，因此不要在它们之间添加空格或换行符。

使用Bootstrap固定两个流体div之间的宽度div

1 个答案: