Question

我有以下基本布局：

<div id="sidebar" style="float: left; width: 250px; display block;"></div>
<div id="maincontent"></div>

相当自我解释 - 在左边我有导航内容和信息，页面的其余部分是主要内容。

我有一个用户控件，我正在使用以下内容：

<div id="weather-data">
    <div id="today" style="float: left;"></div>
    <div id="tomorrow" style="float: left;"></div>
    <div id="etc" style="float: left;"></div>
</div>

每个区块显示图像和一些日常天气文本。

以上所有显示都很好，但问题是这样的：

侧边栏的高度（例如）高400像素。 maincontent div包含一个儿童div 天气数据，高200像素。在天气数据 div中，较小的div浮动到左侧。

在天气数据 div下面，我想要一些文字。这就是困难所在。

如果我在天气数据之后清除浮动，那么它也会清除侧边栏，从而导致大量的空白。

<div class="weather-data">
    <div id="today" style="float: left;"></div>
    <div id="tomorrow" style="float: left;"></div>
    <div id="etc" style="float: left;"></div>

    <div style="clear: left;"></div>
</div>

一些粗略的图表......

我想要的是什么：

[@@@][##########################]
[@@@][##########################]
[@@@][##########################]
[@@@][ Additional text          ]
[@@@][                          ]
[@@@][                          ]
[   ][                          ]

我得到了什么：

[@@@][##########################]
[@@@][##########################]
[@@@][##########################]
[@@@][                          ]
[@@@][                          ]
[@@@][                          ]
[   ][ Additional text          ] <-- Additional text jumps down below the sibebar content :o(

其中@是侧边栏内容，＃是天气数据 div集合。

稍微更新...设置天气数据div上的溢出：隐藏; ，但是没有风险吗？

Answer 1

您可以使用overflow: hidden，只要您没有为具有此属性的div指定高度，它就不会剪切您的内容。

Answer 2

尝试在“weather-data”div的末尾添加<div style="clear:both"></div>。

复数除法（浮动/清除） - 两个主要列+较小的内部列

2 个答案: