Question

我在div div中有两个container：JS Fiddle Link

<div id="container">
    <div class="leftContainer">
        Left
    </div>
    <div class="rightContainer">
        <h3>Right</h3>
    </div>
</div>

但我不确定为什么他们不会将这两个对齐到顶部或与此CSS具有相同对齐的任何位置：

div#container{vertical-align:top;background:#e4e4e4}

div#container div{
  display:inline-block;
  width:200px;
  height:50px;

}
div#container div.leftContainer{background:#999}
div#container div.rightContainer{background:#555}

Answer 1

为vertical-align:top; div

的孩子添加#container

   div#container div{
    vertical-align:top;
    }

Answer 2

你在<h3>标签内右边，这是为标签添加边距（这反过来又将右边的标题向下推）

将Left和Right设置为内部标题标记，或者删除Right标记，它们将显示相同的内容。

<div id="container">
    <div class="leftContainer">
        Left
    </div>
    <div class="rightContainer">
        Right
    </div>
</div>

你的CSS可以保留原样

div#container{vertical-align:top;background:#e4e4e4}

div#container div{
    display:inline-block;
    width:200px;
    height:50px;

}
div#container div.leftContainer{background:#999}
div#container div.rightContainer{background:#555}

Answer 3

在第一个div中设置float left以强制对齐并删除hr或将hr添加到

div#container{vertical-align:top;background:#e4e4e4}

div#container div{
  display:inline-block;
  width:200px;
  height:50px;

}
div#container div.leftContainer{background:#999; float:left;}
div#container div.rightContainer{background:#555}

<div id="container">
    <div class="leftContainer">
        Left
    </div>
    <div class="rightContainer">
        Right
    </div>
</div>

Answer 4

div#container div{
      float: left;/*remove inline block and add float left to align your div*/
      width:200px;
      height:50px;

    }

见证：http://jsfiddle.net/JentiDabhi/x21nv0gm/

Answer 5

只需添加css：

div#container { float:left;}

Answer 6

如果你能够使用外部框架，我建议你使用Twitter Bootstrap并使用它的网格系统来简单地对齐东西，如：

<div class="container">
   <div class="row">
      <div class="specify column sizes">
         Left
      </div>
      <div class="specify column sizes">
         <h3>Right</h3>
      </div>
   </div>
</div>

使用Bootstrap并指定您选择的列大小（col-sm-N，col-md-N，col-xs-N，col-lg-N）而不是使用固定的200px宽度可以让您更改页面它仅使用CSS

在不同显示尺寸上的行为

Answer 7

要保留显示内联块属性，而不使用浮点数 - 您可以通过添加以下CSS将h3转换为内联元素：

h3 {display:inline;}

Answer 8

添加vertical-align：top;对于#container div的孩子

div#container div{
    vertical-align:top;
    }

要保留显示内联块属性，而不使用浮点数 - 您可以通过添加以下CSS将h3转换为内联元素：

h3 {display:inline;}

两个内联块未对齐

8 个答案: