Question

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

以下是代码：

  <body>


<div class="site" style="background:yellow; "> 

<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; height:400px; width:auto; min-width:417px; clear:left;">Tree   Tree   Tree   Tree   Tree   Tree   </div>

</div>


  </body>

我希望绿色div保持在顶部，Orange div内容不要落在绿色div之后，而橙色div的最小宽度为417px。提前感谢您提供任何帮助！

尘埃

Answer 1

您的代码中有拼写错误：

<div class="tree" 
  style="background:orange; height:400px; width:auto; min-width:4170px; clear:left;">
   Tree   Tree   Tree   Tree   Tree   Tree
</div>

您已将min-width设为4170px。

将其更改为417px，您的所有问题都将消失。

Answer 2

您使用'site'div作为包装器/容器 - 将其最小宽度设置为树的最小宽度+广告的宽度 - 417 + 160 = 577px

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

然后，每当你跌到那个宽度以下时，就不会把绿色'广告'拉到一切之上。如果将填充/边距添加到树或广告div中，则必须将其添加到容器的最小宽度中。

漂浮正确的问题

2 个答案: