Question

为什么首先“显示：inline-block;” 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;
}

HTML代码

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

Answer 1

您只需将vertical-align:middle;设置为.conteiner元素，因为文本与另一个容器中的元素对齐。

See the fiddle

Answer 2

将属性float:left添加到.conteiner

<强> DEMO

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

Answer 3

你可以像这样使用

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

对于固定宽度只需使用table-cell它就可以正常工作。

Answer 4

在vertical-align:top; div

中添加.conteiner

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

DEMO

为什么首先“显示：内联块;” div下面那个第二个？

4 个答案: