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

vertical-align问题是inline-block元素的默认值是baseline- 您可以更改显示值以阻止或更改垂直对齐值，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;
}