Question

我想将我的Divs调整为＆＃34;复合时间线＆＃34; （header1）左边的div

图像div（标题2）向右浮动。

和＆＃34;这是div2＆＃34; div恰好在这两个之间，它们之间有12px的空间。我试图做但失败了，我不想给出＃34;这是div2＆＃34;从顶部div，我想要它相对于header1和header2 divs。

这是代码。

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;
}

Answer 1

在它们之间添加空格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

Answer 2

从css中的＃header1中删除float：left并完成

// 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">

<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>
</html>




//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;
}

#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;
}

Answer 3

只需清理您的标记，该标记无效且图片代码为<img src= />

@import url(http://fonts.googleapis.com/css?family=Roboto);
#header1Main
{

}
#header1 {
    display: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:block;
    right:0px;
    float:right;
    margin-right: 14px;
    background-color:blue;
    vertical-align: middle;
    line-height: 36px;
}

.div2Main
{
    display: block;
    background-color: aqua;
    clear: both;
}

<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"/>   
    </div>
    <div class="div2Main">this is div 2</div>
</div> 
  
</body>

Answer 4

请尝试了解正确和浮动的含义。无论如何......这是代码

http://jsfiddle.net/t0o2pwn5/

像这样改变你的CSS。

#header1Main {
    display: block;
}

#header1 {
    display:inline-block;
    font-family: Roboto;
    font-size: 12px;
    height: 36px;   
    background-color:green;
    width:70%;
    margin-left: 12px;
    vertical-align: middle;
    line-height: 36px;
}

#header2 {
    display:inline-block;
    width: 10%;
    margin-left: 12px;
    background-color:blue;
    vertical-align: middle;
    line-height: 36px;
}

.div2Main {
    display:block;
    background-color: aqua;
    margin-top: 12px;
    margin-left:12px;
}

如何将div对齐彼此

4 个答案: