我想将Divs对齐为左侧的“复合时间轴”（header1）div
image div（标题2）向右浮动。
和“ this is div2” div位于这两个下方，它们之间有12px的间距。我尝试做但失败了，并且我不想从顶部给出“ this is div2” div的边距，我想要相对于header1和header2 div的边距。
这是代码。
的HTML
<meta name="viewport" content="initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>Screen1</title>
<link rel="stylesheet" type="text/css" href="Screen1.css">
<body>
<div id="header1Main">
<div id="header1">Composite Timeline</div>
<div id="header2"><img src="images/drop-down-arrow.png"></img></div>
</div>
<div class="div2Main">this is div 2</div>
<div></div>
</body>
CSS：
@import url(http://fonts.googleapis.com/css?family=Roboto);
#header1Main
{
}
#header1 {
display:inline-block;
font-family: Roboto;
font-size: 12px;
height: 36px;
background-color:green;
left: 0;
width:70%;
margin-left: 18px;
vertical-align: middle;
line-height: 36px;
float: left;
}
#header2
{
display:inline-block;
margin-right:20%;
right:0px;
float:right;
margin-right: 14px;
background-color:blue;
vertical-align: middle;
line-height: 36px;
}
.div2Main
{
display:inline-block;
display:block;
background-color: aqua;
margin-top: 12px;
margin-left:12px;
}
最佳答案
在它们之间添加一个清除div并将div的高度设置为12px
的HTML
<div id="header1Main">
<div id="header1">Composite Timeline</div>
<div id="header2"><img src="images/drop-down-arrow.png"></img></div>
</div>
<div class="clear"></div>
<div class="div2Main">this is div 2</div>
<div></div>
的CSS
@import url(http://fonts.googleapis.com/css?family=Roboto);
#header1Main
{
}
#header1 {
display:inline-block;
font-family: Roboto;
font-size: 12px;
height: 36px;
background-color:green;
left: 0;
width:70%;
margin-left: 18px;
vertical-align: middle;
line-height: 36px;
float: left;
}
#header2
{
display:inline-block;
margin-right:20%;
right:0px;
float:right;
margin-right: 14px;
background-color:blue;
vertical-align: middle;
line-height: 36px;
}
.div2Main
{
display:inline-block;
display:block;
background-color: aqua;
margin-top: 12px;
margin-left:12px;
}
.clear { clear:both; height: 12px; }
DEMO