清除嵌套的浮点数 [英] clearing nested floats

问题描述

我正在创建一个平铺的图像网格，就像一个带有缩略图网格的图像库一样，我需要将这些图像包装到3张图像之后的下一行。因此，我浮动了一组每个都包含一个图像的div，然后在三个图像之后手动清除了浮动。

I'm creating a tiled grid of images much like an image gallery with a grid of thumbnails, and I need the images to wrap onto the next row after 3 images. So I'm floating a bunch of divs that each contain an image and then clearing the float manually after three images.

问题是我在一个相当复杂的现有模板，已经利用float来安排所有内容。清除网格中的浮动内容可能会扰乱整个页面，大概是因为它清除了页面中的每个浮动内容。我能做什么？

The problem is that I'm working within a rather convoluted existing template that already makes use of float to arrange everything. Clearing the float in my grid scrambles the entire page, presumably because it's clearing every float in page so far. What can I do?

我正在通过插入空白div来清除浮动内容。即：

I'm clearing the float using by inserting a blank div. ie:

<div style='clear:right'>

其他清除浮点的方法可能会更好吗？

Might one of the other methods for clearing floats work better?

推荐答案

1. 创建一个合适的容器div（如果
   您还没有一个容器）


2. 在
   容器div上设置限制宽度-等于3张图像占用的相同
   。


3. 允许所有图像浮动-它们会b $ b自动换行。


4. 使用
   'overflow：hidden'设置容器div，这将为您清除
   浮动金额。

1. Create a suitable container div (if you don't already have one)
2. Set a restrictive width on the container div - equalling the same that 3 images takes up.
3. Allow all images to float - they'll automatically wrap.
4. Set the container div with 'overflow: hidden', which will clear the floats for you.

简化版可能看起来像这样：

A simplified version might look like this:

<style>

div#container {  
  overflow: hidden; 
  width: 300px; 
}

div#container img { 
  float: left; 
  width: 100px; 
}

</style>

<div id="container"> 

  <img src="" />
  <img src="" />
  <img src="" />


  <img src="" />
  <img src="" />
  <img src="" />


  <img src="" />
  <img src="" />
  <img src="" />

</div>

这篇关于清除嵌套的浮点数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！