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

【问题标题】：Fixed width div between two fluid divs with Bootstrap使用 Bootstrap 固定两个流体 div 之间的宽度 div
【发布时间】：2013-09-14 14:11:24
【问题描述】：

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

这是一个插图：

【问题讨论】：

标签： html css layout twitter-bootstrap responsive-design

【解决方案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，所以不要在它们之间添加空格或换行。

【讨论】：