align div inline with container div

Question

我發現this code from this，但現在我試圖將另一個div class="new"對齊，並在container div之外。我試圖使用vertical-align:top,float,display: inline-block但他們沒有工作。
我錯過了什麼？

這就是我想要做的。 HTML

<div class="container"> 
    <div class="small"></div> 
    <div class="big"></div> 
</div> 
<div class="new"></div> 

CSS

.container{ 

    border: 1px black solid; 
    width: 320px; 
    height: 120px;  
    padding: 10px; 
} 

.small{ 
    display: inline-block; 
    width: 40%; 
    height: 30%; 
    border: 1px black solid; 
    background: aliceblue;  
} 

.big { 
    display: inline-block; 
    border: 1px black solid; 
    width: 40%; 
    height: 50%; 
    background: beige;  
} 
.new{ 
    display: inline-block; 
    width: 50px; 
    height: 50px; 
    background-color: gray; 
    vertical-align: top; 
} 

Answer 1

您必須申請display:inline-block和vertical-align:top到兩個container和new的div。

.container { 
 
    border: 1px black solid; 
 
    width: 320px; 
 
    height: 120px; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
} 
 
.small { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    width: 40%; 
 
    height: 30%; 
 
    border: 1px black solid; 
 
    background: aliceblue; 
 
} 
 
.big { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    border: 1px black solid; 
 
    width: 40%; 
 
    height: 50%; 
 
    background: beige; 
 
} 
 
.new { 
 
    height: 120px; 
 
    width: 80px; 
 
    border: 2px solid red; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
}

<div class="container"> 
 
    <div class="small"></div> 
 
    <div class="big"></div> 
 
</div> 
 
<div class="new"> 
 
    new box 
 
</div>

Answer 2

.container{ 
 
    
 
    border: 1px black solid; 
 
    width: 320px; 
 
    height: 120px;  
 
    
 
} 
 

 
.small{ 
 
    display: inline-block; 
 
    width: 40%; 
 
    height: 30%; 
 
    border: 1px black solid; 
 
    background: aliceblue;  
 
} 
 

 
.big { 
 
    display: inline-block; 
 
    border: 1px black solid; 
 
    width: 40%; 
 
    height: 50%; 
 
    background: beige;  
 
} 
 

 
.new { 
 
    display: inline-block; 
 
    border: 1px black solid; 
 
    width: 10%; 
 
    height: 50%; 
 
    background: yellow;  
 
}

<div class="container"> 
 
    <div class="small"></div> 
 
    <div class="big"></div> 
 
    <div class="new"></div> 
 
</div>

我不明白你的問題。它工作正常。

Answer 3

一個解決方案是將容器浮動到左：

.container{ 
 
    
 
    border: 1px black solid; 
 
    width: 320px; 
 
    height: 120px;  
 
    float: left; 
 
    
 
} 
 

 
.small{ 
 
    display: inline-block; 
 
    width: 40%; 
 
    height: 30%; 
 
    border: 1px black solid; 
 
    background: aliceblue;  
 
} 
 

 
.big { 
 
    display: inline-block; 
 
    border: 1px black solid; 
 
    width: 40%; 
 
    height: 50%; 
 
    background: beige;  
 
} 
 

 
.new { 
 
    height: 120px; 
 
    width: 80px; 
 
    border: 2px solid red; 
 
    display: inline-block; 
 
}

<div class="container"> 
 
    <div class="small"></div> 
 
    <div class="big"></div> 
 
</div> 
 
<div class="new"> 
 
    new box 
 
</div>