Question

在此示例中是否可以删除楼梯效果？我有一个右浮动的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/

Answer 1

您可能希望尝试使用内联块来进行布局，而不是使用浮点数。

我在此处更新了您的示例：http://jsfiddle.net/FusWd/4/

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

IE 6-7不支持内联块，你必须使用'hasLayout'技巧。
内联块元素受标记中的空格影响，这可能会也可能不会破坏您的布局。有几个解决方案。
- 您可以删除标记中的内联块元素之间的空格
- 将父元素的font-size和line-height设置为0，将字母间距和字间距属性设置为-1px，然后将font-size和line-height重置为所需的值，并重置字母间距和normal值的字间距属性。

在此示例中删除楼梯

1 个答案: