Question

我不明白为什么我的div使用display：inline-block没有正确排队。它们具有相同的高度，它们应该放在一个有呼吸空间的容器中，但是元素遍布整个地方。

使用以下标记和CSS：

<div class="content-wrapper"> <a href="#" class="row-link">
        <div class="row">
            <div class="number-wrapper">
               <div class="number">1
               </div>
            </div>
            <div class="text-container">
                <div class="title">Santa</div>
                <div class="desc">Santa is Awesome</div>                    
     <div class="host">northpole.com</div>
            </div>
            <div class="more-wrapper">
                <div class="more">
                    more about Santa
                </div>
            </div>
       </div><!-- end row -->
   </a> 
<!-- end block-level row-link -->

 .row {
    width:960px;
    margin:3px auto;
    display:block;
    height:110px;
}
a {
    text-decoration: none;
}
.number-wrapper {
    display:inline-block;
    height:100px;
    width:120px;
    background: #e8e8e8;
}
.number {
    display:inline;
}
.text-container {
    display:inline-block;
    width:600px;
    height:100px;
    background: #9c9c9c;
}
.more-wrapper {
    display:inline-block;
    height:100px;
    width:150px;
    background: #000;
}
.title {
    font-size:30px;
    color:red
}
.desc {
    font-size:18px;
    color:white;
}
.host {
    font-size:10px;
    color:green;

}

有人可以告诉我为什么这些元素没有排成一排吗？

Answer 1

对于inline-block的默认元素，vertical-align的值为baseline：

将框的基线与父框的基线对齐。

查看更多here。您可以将其更改为top或middle：

.number-wrapper {
   vertical-align:top;
}

演示 http://jsfiddle.net/83jYY/9/

Answer 2

您是否有理由不想使用花车？将这些div切换为display:block并将它们向左浮动，您就可以找到您正在寻找的行为。

.number-wrapper {
    display:block;
    height:100px;
    width:120px;
    background: #e8e8e8;
    float:left;
}
.number {
    display:inline;
}
.text-container {
    display:block;
    width:600px;
    height:100px;
    background: #9c9c9c;
    float:left;
}

http://jsfiddle.net/83jYY/10/

内联块未正确排列

2 个答案: