复杂Divs（浮动/清除） - 两个主列和较小的内部列 [英] Complex Divs (float/clear) - Two main columns + smaller internal columns

问题描述

我有以下基本布局：

 < div id =sidebarstyle =float：left; width ：250px; display block;>< / div> 
< div id =maincontent>< / div> 
  

完全自我解释 - 左侧有导航内容和信息，页面的其余部分主要内容。

我有一个用户控件，其中使用了以下内容：

 < div id =weather-data> 
< div id =todaystyle =float：left;>< / div> 
< div id =tomorrowstyle =float：left;>< / div> 
< div id =etcstyle =float：left;>< / div> 
< / div> 
  

每个区块都会显示每日天气的图片和部分文字。

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

侧边栏的高度（例如）高400像素。 maincontent div包含一个高度为200像素的子div weather-data 。 weather-data div 下方是较小的div。

想要一些文本。这是困难所在。

如果我在 weather-data 之后清除浮动，那么它也会清除边栏导致大块空格。

 < div class =weather-data> 
< div id =todaystyle =float：left;>< / div> 
< div id =tomorrowstyle =float：left;>< / div> 
< div id =etcstyle =float：left;>< / div> 
 
< div style =clear：left;>< / div> 
< / div> 
  

一些粗糙的图表...

我想要的：

  [@@@] [################ ##########] 
 [@@@] [##########################] 
 [@@@] [#################################] 
 [@@@] [附加文字] 
 [@@@] [] 
 [@@@] [] 
 [] [] 
  

我得到了什么：

  [@@@] [######### #################] 
 [@@@] [###################### ####] 
 [@@@] [#################################] 
 [@@@ ] [] 
 [@@@] [] 
 [@@@] [] 
 [] [附加文本]<  - 附加文本跳到sibebar内容下面：o 
  

其中@是侧栏内容，＃是

轻微更新...在天气数据div工作中设置 overflow：hidden; ，但isn

可以使用 overflow：hidden ，然后使用它不会剪裁您的内容，只要您没有为此属性的div指定高度。

I have the following basic layout:

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

Fairly self explanatory - on the left I have navigation stuff and info, and the rest of the page is the main content.

I have a user control for which I'm using the following:

<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>

Each block displays an image and some text for the daily weather.

All the above displays fine, but the problem is as such:

The height of the sidebar is (as an example) 400px high. The maincontent div houses a child div weather-data which is 200px high. Within the weather-data div are smaller divs floated to the left.

Below the weather-data div I want some text. This is where the difficulty lies.

If I clear the float after weather-data then it also clears the sidebar causing a big chunk of whitespace.

<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>

Some crude diagrams...

What I want:

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

What I get:

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

Where @ is sidebar content, # is the weather-data div collection.

Slight update... setting overflow: hidden; on the weather-data div works, but isn't that risky?

解决方案

You can use overflow: hidden, it will not clip away your content as long you don't specify a height for the div with this property.

这篇关于复杂Divs（浮动/清除） - 两个主列和较小的内部列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！