-2

在这个例子中是否可以消除楼梯效应？我有一个向右浮动的 div 和一些向左浮动的固定高度和固定宽度的 div。如果 div 在某个地方相遇，我会得到一个相当奇怪的楼梯效果。

我知道为什么会发生这种情况并且我明白了，但我正在寻找避免这种情况的解决方案。请帮我

<div class="container">
  <div class="fright">just some contents floating right</div>
  <div class="fleft">a div</div>
  <div class="fleft">
        this one is the problem. 
        Is it possible to have this div start at position B
  </div>
  <div class="fleft"><b>Position B</b></div>
  <div class="fleft">a div</div>
</div>

和CSS

div{
    margin:10px;
    padding:10px;


.container{
    width:460px;
    float:left;
}

.fright{
    float:right;
    border:1px solid green;
}

.fleft{
    float:left;
    height:180px;
    width:180px;
    border:1px solid orange;
}​

http://jsfiddle.net/FusWd/1/

4

1 回答 1

2

您可能想尝试使用 inline-block 来进行布局，而不是使用浮点数。

我在这里更新了你的例子：http: //jsfiddle.net/FusWd/4/

这种技术有一些注意事项：

  • IE 6-7 不支持内联块，您必须使用“hasLayout”技巧。
  • inline-block 元素受标记中的空白影响，这可能会或可能不会破坏您的布局。有几个解决方案。
    • 您可以删除标记中内联块元素之间的空格
    • 将父元素的 font-size 和 line-height 设置为 0，将 letter-spacing 和 word-spacing 属性设置为 -1px，然后将 font-size 和 line-height 重置为所需的值，并重置 letter-spacing 和 word-间距属性的normal值。
于 2012-11-19T13:18:48.787 回答