Question

我正在尝试使用相同高度的3个div，这些div本身位于3个相同高度的自举列中。

我已经看到了关于如何使三列具有相同高度的其他答案，这适用于外部div（列）。问题是我想在每个列中都有一个div（以便有不同的背景颜色），那些div应该仍然是相同的高度。我还没有找到适合这种配置的工作解决方案。

这个例子应该更清楚：

HTML：

<div class="container">
    <div class="row marketing">
        <div class="col-md-4">
            <div class="vignette">
                <h2>Foo</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
        </div>
        <div class="col-md-4">
            <div class="vignette">
                <h2>Bar</h2>
                <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
        </div>
        <div class="col-md-4">
            <div class="vignette">
                <h2>Baz</h2>
                <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </div>
    </div><!-- //row -->
</div> <!-- //container -->

CSS：

div.marketing {
    display: table;
    height: 100%;
}

.marketing h2 {
    color: #ffffff;
    font-family: "Abel", Arial, sans-serif;
    font-weight: 900;
    font-size: 40px;
}

.marketing p {
    color: #ffffff;
    font-family: "Abel", Arial, sans-serif;
    font-weight: 500;
    font-size: 20px;
}

.marketing > div[class*="col-"] {
    float: none;
    display: table-cell;
    padding: 10px 10px;
    height: 100%;
}

@media screen and (max-width: 479px) {
    div.marketing {
        display: block;
    }
    .marketing > div[class*="col-"] {
        display:inline-block;
    }
}

.vignette {
    background: #666688; /* fallback color */
    background: rgba(102, 102, 136, 0.5);
    padding: 3px 10px;
    height: 100%;
    vertical-align: top;
}

它在Firefox上产生预期的输出，但彩色块在Chrome / Safari上的高度不同：第三列内部div比其他两个更高或更小，具体取决于您的屏幕分辨率。

请参阅上面的代码以及bootstrap 3.3.4：https://jsfiddle.net/ch5zgexm/1/

Answer 1

我认为最简单的解决方案是将display: inline-block添加到vignette类。

.vignette {
    background: #666688; /* fallback color */
    background: rgba(102, 102, 136, 0.5);
    padding: 3px 10px;
    height: 100%;
    vertical-align: top;
    display: inline-block;
}

你可以see your updated Fiddle here。希望有所帮助。

Answer 2

在CSS中，您为display: table-cell列设置了div，但包含div（div.marketing）的display: table已display: table-cell。在元素上使用display: table-row时，您应该将其嵌套在具有display的元素中。您没有这样做的事实是跨浏览器导致不可预测行为的原因，因为每个浏览器都试图以其认为“最佳”的方式呈现页面。

现在，解决方案。您需要做的是更正div.marketing到table-row的{{1}}。这会导致.vignete div s不使用列div的完整高度，但您可以使用display: inline-block轻松解决此问题.vignete }。

See the updated JSFiddle

Answer 3

尝试添加此css代码：

  box-sizing: content-box;

像这样的小插曲课：

.vignette {
    background: #666688; /* fallback color */
    background: rgba(102, 102, 136, 0.5);
    padding: 3px 10px;
    height: 100%;
    vertical-align: top;
    box-sizing: content-box;
}

Answer 4

更新Padding top / bottom（在小提琴中用chrome测试）

.vignette {
    background: #666688; /* fallback color */
    background: rgba(102, 102, 136, 0.5);
    padding: 1px 10px;
    height: 100%;
    vertical-align: top;
}

3个引导列上包含相同高度的div

4 个答案: