Question

我试图在容器div中创建两个div具有相同的高度。我正在使用bootstrap的网格。正如您在下面的图像示例中看到的那样。输出显示带有类page-member-detail-info（绿色边框div）的div，它不会占据父级div的高度的100％。

注意：如果我使用类page-member-detail-container（红色边框div）创建div的高度，则固定值为250px。然后结果如预期。 page-member-detail-info（绿色边框div）将是高度的100％。

HTML：

<div class="container">
    <div class="row">
        <div class="col-sm-12 page-member-detail-container">
            <div class="col-sm-3 page-member-detail-image">
                <img src="http://example.com/image.jpg" alt="My Image">
            </div>
            <div class="col-sm-9 page-member-detail-info">
                DETAILS
            </div>
        </div>
    </div>
</div>

CSS：

.page-member-detail-container {
    border: 3px solid #FF0000; // red
    padding: 0;
}

.page-member-detail-image {
    border: 3px solid #0000ff; // blue
    padding-left: 0;
}

.page-member-detail-image>img {
    width: 100%;
}

.page-member-detail-info {
    border: 3px solid #009b00; // green
    height: 100%;
}

Answer 1

Flexbox的另一个案例！只需将display：flex添加到容器中即可。

.page-member-detail-container {
    border: 3px solid #FF0000;
    padding: 0;  
    display: flex;
}

.page-member-detail-image {
    border: 3px solid #0000ff;
    padding-left: 0;
}

.page-member-detail-image>img {
    width: 100%;
}

.page-member-detail-info {
    border: 3px solid #009b00;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="col-sm-12 page-member-detail-container">
            <div class="col-sm-3 page-member-detail-image">
                <img src="http://example.com/image.jpg" alt="My Image">
            </div>
            <div class="col-sm-9 page-member-detail-info">
                DETAILS
            </div>
        </div>
    </div>
</div>

Answer 2

如果需要支持旧版浏览器，则可以进行设置。要显示的page-member-detail-container：要显示的表和子DIV：table-cell。这将为您提供所需的平等高度。此外，它还打开了vertical-align属性。

使Div的高度不同

2 个答案: