Question

如果左侧div内的内容增加，整体布局的高度将相应增加，一切都将按预期工作：jsfiddle。但是，如果右侧div内的内容高度增加，则布局不会随之增加：jsfiddle

<div class="outer">
   <div class="contain">
        <div class="one">
       </div><div class="two">
                 <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

        </div>
    </div>

    <div class="bottom">
    </div>
</div>

CSS：

.outer {
   display: block;
   width: 500px;
   min-height: 500px;
   background-color: black;    
   border: 2px solid black;
}

.contain {
   display: block;
   width: 500px;
   min-height: 500px;
   background: red;
}

.one {
    display:inline-block;
    width: 200px;
    min-height: 100px;
    background: yellow;
    bottom:200px;
}

.two {
    float:right;
    width: 300px;
    min-height: 300px;
    background: purple;

}

.bottom {
    display:block;
    background: blue;
    width: 500px;
    height:200px;  
    bottom: 0;    
}

非常感谢一些指导。

Answer 1

我假设你的代码中你想要两个盒子（一个和两个）如果它们没有填满空间那么底部对齐？如果是这样，你应该试试这个：

.one {
    display:inline-block;
    width: 200px;
    min-height: 100px;
    background: yellow;
    vertical-align: bottom;
}

.two {
    display:inline-block;
    width: 300px;
    min-height: 300px;
    background: purple;
    vertical-align: bottom;
}

您正在设置两个设置宽度，因此将它们设置为inline-block并且它们应该并排放置，并且两者都占用空间。浮动块不占用空间。

Answer 2

将font-size：0添加到class =“contains”，因为它内部有内联块div，它们本质上采用标记中的空白空间并创建间隙。如果需要，请分别在内部元素中添加font-size属性。

并排div和他们的高度有一些问题

2 个答案: