Html 将div内联与容器div对齐

我从中找到了，但现在我正在尝试将另一个div

class=“new”

与

容器div

的内部和外部对齐。我曾尝试使用

垂直对齐：顶部

，

浮动

，

显示：内联块

，但都不起作用。
我错过了什么

这就是我想做的。 HTML

.container{
边框：1px黑色实心；
宽度：320px；
高度：120px；
}
.小{
显示：内联块；
宽度：40%；
身高：30%；
边框：1px黑色实心；
背景：aliceblue；
}
.大{
显示：内联块；
边框：1px黑色实心；
宽度：40%；
身高：50%；
背景：米色；
}
.新的{
显示：内联块；
边框：1px黑色实心；
宽度：10%；
身高：50%；
背景：黄色；
}

---

解决方案是将容器向左浮动：

.container{
边框：1px黑色实心；
宽度：320px；
高度：120px；
浮动：左；
}
.小{
显示：内联块；
宽度：40%；
身高：30%；
边框：1px黑色实心；
背景：aliceblue；
}
.大{
显示：内联块；
边框：1px黑色实心；
宽度：40%；
身高：50%；
背景：米色；
}
.新的{
高度：120px；
宽度：80px；
边框：2倍纯红；
显示：内联块；
}

新盒子

您必须将

显示：内联块

和

垂直对齐：顶部

应用于

容器

和

新的

div

.container{
边框：1px黑色实心；
宽度：320px；
高度：120px；
显示：内联块；
垂直对齐：顶部；
}
.小{
显示：内联块；
垂直对齐：顶部；
宽度：40%；
身高：30%；
边框：1px黑色实心；
背景：aliceblue；
}
.大{
显示：内联块；
垂直对齐：顶部；
边框：1px黑色实心；
宽度：40%；
身高：50%；
背景：米色；
}
.新的{
高度：120px；
宽度：80px；
边框：2倍纯红；
显示：内联块；
垂直对齐：顶部；
}

新盒子

不，新的div应该在

容器div

之外。是的，应该是这样的，这是我尝试过的，但没有起作用。我添加了我的code@Ringo-您提到您尝试将

display:inline block

应用于

.container

，但没有成功。这在

display:inline block

上应该可以很好地工作。容器将位于左侧，我不想要它，所以我用它来
。new
，但它不起作用。不，对不起，我没有说清楚，我想要容器位于中间
<div class="container">
    <div class="small"></div>
    <div class="big"></div>
</div>
<div class="new"></div>

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