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 - 您可以更改显示值以阻止或将vertical-align值更改为{{1元素将按预期排列：

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

bottom

填充内容时，Div会在页面中向下推

1 个答案: