Question

以下是链接：http://www.whiterootmedia.com/homepage_layout_test/

以下是代码：

<div class="site" style="background:yellow;min-width: 577px; "> 

<div class="banner" style="background:blue; height:100px; width:417px; float:left;">Banner   Banner   Banner   Banner   Banner   </div>
<div class="ads" style="background:green; height:800px; width:160px; float:right;">Ads  Ads  Ads  Ads  Ads  Ads  Ads  Ads  Ads  </div>
<div class="tree" style="background:orange; white-space:nowrap; height:400px; width:auto; min-width:417px; clear:left;">Tree   Tree   Tree   Tree   Tree   Tree   Tree   Tree   Tree   Tree   Tree   Tree   Tree   Tree   Tree   Tree   Tree   Tree   Tree   Tree   Tree   Tree   Tree   Tree   Tree   Tree   Tree   Tree   Tree   Tree   </div>

</div>

我希望当缩小窗口时，橙色div内容不会落后于绿色div，我希望橙色div文本将绿色div推离屏幕。

尘埃

Answer 1

使用css属性“z-index”。

例如：

.onTop {
    z-index: 1;
}
.onBottom {
    z-index: 0;
}

数字越大，元素越“顶部”。

Answer 2

你是否有机会尝试这样做？

http://jsfiddle.net/d7seY/

注意：我改变了一些测量值，因此在jsfiddle中布局会更舒服。

Answer 3

您有几个选择：

删除“white-space：nowrap;” （但我认为你有一些理由）
添加溢出：隐藏到橙色div。这将简单地删除溢出的文本 - 它不会落在绿色div的后面或顶部。

但是，如果你保留“white-space：nowrap”，并且那行“Tree”文本不合适，它必须去某个地方......你的选择落后于，或者被砍掉溢出：隐藏。

如果我错过了你的目标，请告诉我。

更多浮动权问题

3 个答案: