インラインブロックを使用して同じ行に2つのdivを配置できません

Question

同じ行に2つの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

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> 

はこの1つだけ

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を使用し、両方を整列する秘密はDIVdisplay: 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各IDに取り組んCODEPEN

Answer 7

変更display:table-cellため& 0123を追加します。 以下は完全なコードです上部に表示するテキストはですが、ボックスの配置には重要ではありません。そして、あなたは完了です。浮きを取り除く。左、ポジション： 追加フロート：

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