0

我正在尝试创建一个以两个流体 div 为中心的固定宽度 div 的布局。配置应该适合 Bootstrap 行。我该怎么做？

这是一个插图：

在此处输入图像描述

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 是 inline-block，因此不要在它们之间添加空格或换行。

于 2012-09-15T18:47:41.020 回答