Html “为什么第一个？”；显示：内联块&引用；低于第二个的div？

为什么第一个“显示：内联块；”div低于第二个？ 我要一行两个div

参见示例

CSS代码

.conteiner { 
    display: inline-block;
    height: 300px; 
    width:  200px; 
    background-color: #2e9;
    margin: 2px;
}

.inConteiner {
    width:  190px; 
    height: 30px;

    background-color: #29e;
    color: white;

    margin: 2px;
}

<div class="conteiner">
    first 
</div>

<div class="conteiner" id="BaseConteiner">
    second
    <div class="inConteiner">
      <p> 111111111111111 </p>
    </div>
    <div class="inConteiner">
      <p> 222222222222222 </p>
    </div>
    <div class="inConteiner">
      <p> 333333333333333 </p>
    </div>
</div>

HTML代码

.conteiner { 
    display: inline-block;
    height: 300px; 
    width:  200px; 
    background-color: #2e9;
    margin: 2px;
}

.inConteiner {
    width:  190px; 
    height: 30px;

    background-color: #29e;
    color: white;

    margin: 2px;
}

<div class="conteiner">
    first 
</div>

<div class="conteiner" id="BaseConteiner">
    second
    <div class="inConteiner">
      <p> 111111111111111 </p>
    </div>
    <div class="inConteiner">
      <p> 222222222222222 </p>
    </div>
    <div class="inConteiner">
      <p> 333333333333333 </p>
    </div>
</div>

第一
第二
111111111111

2222222222

333333333333

将属性

float:left

添加到您的

.contenner

.conteiner { 
    display: inline-block;
    height: 300px; 
    width:  200px; 
    background-color: #2e9;
    margin: 2px;
    float:left;
}

---

将属性

float:left

添加到

.conteiner

.conteiner { 
    display: inline-block;
    height: 300px; 
    width:  200px; 
    background-color: #2e9;
    margin: 2px;
    float:left;
}

---

只需设置

垂直对齐：中间

添加到

.contenner

元素，因为文本与另一个容器中的元素对齐

---

您只需设置

垂直对齐：中间

添加到

.contenner

元素，因为文本与另一个容器中的元素对齐

---

您可以这样使用

.conteiner { 
    display: table-cell;
    height: 300px; 
    width:  200px; 
    background-color: #2e9;
    margin: 2px;
    float:left;
}

---

对于固定宽度，只需使用表格单元格即可。您可以这样使用

.conteiner { 
    display: table-cell;
    height: 300px; 
    width:  200px; 
    background-color: #2e9;
    margin: 2px;
    float:left;
}

---

对于固定宽度，只需使用表格单元格即可。添加垂直对齐：顶部在

.contenner

div中

.conteiner { 
    display: inline-block;
    height: 300px; 
    width:  200px; 
    background-color: #2e9;
    margin: 2px;
    vertical-align:top;
}

---

添加

垂直对齐：顶部在
.contenner
div中

.conteiner { 
    display: inline-block;
    height: 300px; 
    width:  200px; 
    background-color: #2e9;
    margin: 2px;
    vertical-align:top;
}

如果他事后不清除，浮动可能会导致问题。我认为设置垂直对齐更好。@Billy取决于他的要求。即使这样也有可能！如果他事后不清理，漂浮可能会造成问题。我认为设置垂直对齐更好。@Billy取决于他的要求。即使这样也有可能！