html - Div 被内容填充时向下推页面

Question

我正在尝试制作一个网页，其中有两个并排的框，其中填充了内容(文本/图像等)。这是我的代码的一部分

HTML:

<p><b>Text Here</b></p>

<div id="col1">
    test
</div>

<div id="col2">
</div>

CSS:

#col1 {
    margin-right: 25px;
}

#col2 {
    margin-left: 25px;
}

#col1, #col2 {
    background: #ddd;
    display: inline-block; 
    height: 300px;
    padding: 15px;
    width: 443px;
}

我尝试使用 float: right 和 float: left 但是我的页脚的边距无法正常工作(我使用的 slideToggle 效果也不是光滑)。这是一个显示问题的 JSFiddle

http://jsfiddle.net/srCjs/

谢谢!

Answer 1

问题是 inline-block 元素的 vertical-align 的默认值是 baseline - 您可以更改显示值阻止或将 vertical-align 值更改为 bottom，元素将按预期排列:

http://jsfiddle.net/srCjs/1/

#col1, #col2 {
background: #ddd;
display: inline-block; /* or change the display value */
height: 300px;
padding: 15px;
vertical-align: bottom;
width: 443px;
}