Question

我有2个div必须放在线上。这是我的CSS

.div1,#div2{
 display: inline-block;
 vertical-align: top;
 width:200px
}

.div1{
 width:200px;
 float:left
}

#div2{
 width:200px;
 float:right
}

这是HTML

<a href="#" class='div1'>Home</a>
<a href="#" class='div1'>About</a>
<a href="#" class='div1'>Contact</a>
<a href="#" class='div1'>Location</a>
<div id='div2'>User</div>

问题是所有.div1排列在直线和垂直顶部。但＃div2不在同一行（在线但不是垂直顶部）。这与Firefox有关，但歌剧没有。 css有什么问题？我该怎么办？

Answer 1

无需混合浮点数并显示：inline-block。

这将通过显示实现相同的功能：inlne-block
http://fiddle.jshell.net/czWDM/2/
http://fiddle.jshell.net/czWDM/2/show/

.div1, #div2 {
 display: inline-block;
 vertical-align: top;
 width: 200px;
}

#div2{
 text-align: right;
}

这将与浮动实现相同的目标（尽管不同之处在于您不会有垂直对齐以及由IB元素引起的可能的附加空白：
http://jsfiddle.net/KhN3L/1/
http://jsfiddle.net/KhN3L/1/show/

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.div1, #div2 {
 float: left;
 display: block;
 width: 200px;
}
#div2{
 float: right;
}

vertical-align：top不适用于Opera

1 个答案: