Question

我从this code找到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

.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 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

您必须将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>

将div与容器div对齐

3 个答案: