两个div彼此相邻，一个具有上边距

Question

我试图在html中实现以下布局。更大的div 1.接下来是另一个div，顶部有一个边距。如果我给float：left给第一个div，在给第二个div的margin-top时也会把div 1给掉。 :(

请建议。

Answer 1

看看： http://jsfiddle.net/Dc99N/

.d {
    display: inline-block;
    border:2px solid;
    width: 200px;
    height: 200px;
}

.sm {
   margin-top: 50px;
   height: 150px;
}

Answer 2

这是你想要的，经过测试和工作的：）

http://jsfiddle.net/4FWWp/

<强> HTML

<div id="first"><p>Hello<br/>Test</p></div>
<div id="second">World</div>

<强> CSS

#first{
    background-color:red;
    float:left;
}

#second{
    background-color:blue;
    float:left;
    margin-top:52px;
}

Answer 3

Flex-box可能是最好，更简单的解决方案。

IE从版本11开始支持它，目前所有主流浏览器都有很好的支持。也许还有一段时间，但......我认为在几个月内可能是一个非常有趣的功能。

请查看Flexible Box Layout Module

Answer 4

快速刺伤它似乎有可能。 你需要的是在div上显示内联块并将div的高度设置为百分比。 看看我的代码：http://codepen.io/nighrage/pen/bKFhB/ 灰色背景是父div。