我怎样才能正确地让div并排坐在一起？

我明白这个想法，你可以使用内联块来让div彼此相邻，并且你可以在父对象上使用nowrap来确保它们不会被换行。我的问题是，将任何div放入这些使得下面的div压下。我创建了一个的jsfiddle，借以说明问题：我怎样才能正确地让div并排坐在一起？

http://jsfiddle.net/MMtNQ/2/

的HTML的要点是：

<div class="wrapper"> 
    <div class="side-by-side"> 
     <div>Text here</div> 
     <div>Text here</div> 
    </div> 
    <div class="side-by-side"> 
     <div>Text here</div> 
    </div> 
</div>

你可以看到的div被向下调整，因为在div我在第一个。我怎样才能让他们全部对齐顶部？

来源

2013-02-12 weexpectedTHIS

添加vertical-align: top;到.side-by-side定义

.side-by-side { 
    display: inline-block; 
    width: 300px; 
    height: 300px; 
    background-color: #e6e6e6; 
    margin-right: 10px; 
    vertical-align: top; 
}

Here's a fiddle。

来源

2013-02-12 18:05:27

这也是我领导的地方，尽管我无法解释为什么第一个div高和其他低。我想听听解释。 – isherwood 2013-02-12 18:08:32

雅，我不明白为什么这个修复它，我认为vertical-align适用于内部的内容，而不是元素本身。 – weexpectedTHIS 2013-02-12 18:12:22

@weexpectedTHIS默认情况下，内联块对齐基线，浏览器并不总是很好地解决这个问题，特别是对于不同内容的元素。请参阅[本页]（http://css-tricks.com/what-is-vertical-align/）以获得相当好的解释。 – 2013-02-12 18:22:12

我怎样才能正确地让div并排坐在一起？

回答

相关问题