0

如果左侧 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;    
}

​希望得到一些指导。

4

2 回答 2

0

我从您的代码中假设如果两个框（一个和两个）没有填充空间，则它们要底部对齐？如果是这样，你应该试试这个：

.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并且它们应该并排放置，并且都占用空间。浮动块不占用空间。

于 2012-12-17T15:31:53.573 回答
0

将 font-size:0 添加到 class="contain" 中，因为它内部有内联块 div，它们本质上会占用标记中的空白并产生间隙。如果需要，单独在内部元素中添加 font-size 属性。

于 2012-12-17T15:32:02.613 回答