無法將兩個div放在同一行上使用內嵌塊

Question

我想將兩個div放在同一行上。

<div id="page"> 
    <div id="first-box"> 
    </div> 
    <div id="second-box"> 
     this is second box 
    </div> 
</div> 

CSS

div#page { 
    background-color: slategrey; 
    width: 960px; 
    height:900px; 
    margin: 20px; 
    padding:20px; 
    border:4px solid blue; 
} 
div#first-box{ 
    width:200px; 
    height:200px; 
    display:inline-block; 
    border:1px groove black; 
} 
div#second-box{ 
    display:inline-block; 
    width:200px; 
    height:200px; 
    padding:10px; 
    border:1px solid green; 
} 

它把自己置於同一行，當我在第二框中使用vertical-align:top。但爲什麼它的行爲呢？由於 http://codepen.io/rajinirajadev/pen/xgBVab

Answer 1

試試這個..

div#page { 
 
background-color: slategrey; 
 
width: 960px; 
 
height:900px; 
 
margin: 20px; 
 
padding:20px; 
 
border:4px solid blue; 
 
} 
 
div#first-box{ 
 
width:200px; 
 
height:200px; 
 
display:inline-block; 
 
border:1px groove black; 
 
} 
 
div#second-box{ 
 
display:inline-block; 
 
width:200px; 
 
height:200px; 
 
border:1px solid green; 
 
float:left; 
 
}

<div id="page"> 
 
    <div id="first-box"> 
 
    </div> 
 
    <div id="second-box"> 
 
     this is second box 
 
    </div> 
 
</div>

Answer 2

加入這一行你的第二箱的CSS：

div#second-box{ 
    display:inline-block; 
    width:200px; 
    height:200px; 
    padding:10px; 
    border:1px solid green; 
    vertical-align: top; // add this line 
} 

Answer 3

試試這個代碼

div#first-box{ 
    width:200px; 
    height:200px; 
    display:inline-block; 
    border:1px groove black; 
    float: left; 
} 

現場演示 - http://codepen.io/anon/pen/YNgqRN

Answer 4

<div id="page"> 
<div id="first-box"> 
<br clear="all/"> 
</div> 
<div id="second-box"> 
    this is second box 
</div> 

只是這一個

Answer 5

取代我們的代碼，同時增加內容的第一個塊也能正常工作

div#page { 
 
background-color: slategrey; 
 
width: 960px; 
 
height:900px; 
 
margin: 20px; 
 
padding:20px; 
 
border:4px solid blue; 
 
} 
 
div#first-box{ 
 
width:200px; 
 
height:200px; 
 
display:inline-block; 
 
border:1px groove black; 
 
} 
 
div#second-box{ 
 
display:inline-block; 
 
width:200px; 
 
height:200px; 
 
padding:10px; 
 
border:1px solid green; 
 
}

<div id="page"> 
 
    <div id="first-box"> 
 
     this is first box 
 
    </div><div id="second-box"> 
 
     this is second box 
 
    </div> 
 
</div>

Answer 6

短而甜
我的解決方案非常簡單;我使用較少的CSS，並且對齊DIV的祕訣僅僅是將display: inline-flex;添加到您的#page DIV。 以下是完整代碼：

HTML

<div id="page"> 
    <div id="first-box"> 
     This is the first box 
    </div> 
    <div id="second-box"> 
     this is second box 
    </div> 
</div> 

CSS

body{ 
    background:grey; 
    color:white; 

} 
#page{ 
    padding:20px; 
    display: inline-flex; 
    display: -webkit-inline-flex; /* Safari */ 
} 
#first-box, #second-box{ 
    width:200px; 
    height:150px; 
    border: 1px solid black; 
    padding:10px 
} 
#second-box{ 
    border: 1px solid green; 
} 

點擊HERE的工作CODEPEN

Answer 7

變化display:table-cell每個ID &增加vertical-align:top用於在頂部顯示文本，但對於框對齊並不重要。你完成了。刪除任何浮游物。

div#page { 
 
background-color: slategrey; 
 
width: 960px; 
 
height:900px; 
 
margin: 20px; 
 
padding:20px; 
 
border:4px solid blue; 
 
} 
 
div#first-box{ 
 
width:200px; 
 
height:200px; 
 
display:table-cell; 
 
border:1px groove black; 
 
vertical-align:top; 
 
} 
 
div#second-box{ 
 
display:table-cell; 
 
width:200px; 
 
height:200px; 
 
border:1px solid green; 
 
vertical-align:top; 
 
}

<div id="page"> 
 
    <div id="first-box"> 
 
    </div> 
 
    <div id="second-box"> 
 
     this is second box 
 
    </div> 
 
</div>

Answer 8

更換你的CSS與下面的代碼： 加浮動：左，位置：相對的，保證金，它不會打擾你的進一步編碼也。

div #page { 
background-color: slategrey; 
width: 960px; 
height:900px; 
margin: 20px; 
padding:20px; 
border:4px solid blue; 
} 

div #first-box{ 
width:200px; 
height:200px; 
display:inline-block; 
border:1px groove black; 
/* extra added 3 lines */ 
position: relative; 
float:left; 
margin:10px; 
} 


div #second-box{ 
display:inline-block; 
width:200px; 
height:200px; 
padding:10px; 
border:1px solid green; 
/* extra added 3 lines */ 
position: relative; 
float:left; 
margin:10px; 
}