如何在使用float之后得到一条新线：left？ [英] how do I get a new line, after using float:left?

问题描述

我试图做的是有行图像，每行6个图像。其中一些图像需要在其上方浮动另一个图像（与右下角齐平）。我能够从这个线程得到它：

但是，现在我无法在第六张图像后获得新的一排。 < BR> 或< P> 都不会创建新行。他们只是将下一个图像向下推动几个像素，但图像仍然在同一行。似乎浮动风格正在干扰< BR> 和/或< P> p>

我尝试使用不同的样式来创建一个新行，例如 float：none 和 display：block ，但都不起作用。奇怪的是，新行开始第七张图像之后。

以下是目前使用的内容：

 < style type =text / css> 
 .containerdiv {float：left;位置：相对; } 
 .containerdivNewLine {float：none;显示：块;位置：相对; } 
 .cornerimage {position：absolute;底部：0;正确：0; } 
< / style> 
 
< div class =containerdiv> 
< img border =0height =188src =myImgwidth =133/> 
< img class =cornerimageheight =140src =imageOnTopwidth =105/> 
< / div> 
  

对于第7张图片，当我尝试开始新行时，我只是简单地替换'containerdiv'class with'containerdivNewLine'。

解决方案

您需要在每6张图像后清除浮动图像。因此，对于您当前的代码，将 containerdivNewLine 的样式更改为：

  .containerdivNewLine {clear：both;向左飘浮;显示：块;位置：相对; } 
  

What I am trying to do is have rows of images, 6 images in each row. Some of these images need to have another image floating on top of them (flush with the lower-right corner). I was able to get that to work from this thread:

How do I position one image on top of another in HTML?

However, now I'm unable to get the new row after the 6th image. Neither <BR> or <P> create a new line. They simply push the next image down several pixels, but the image is still in the same line. It seems like the float style is interfering with the <BR> and/or <P>.

I tried using different styles for the image that starts a new row, like float:none and display:block, but neither worked. The odd thing is that the new line starts after the 7th image.

Here's what I'm using so far:

<style type="text/css"> 
.containerdiv { float: left; position: relative; } 
.containerdivNewLine { float: none; display: block; position: relative; } 
.cornerimage { position: absolute; bottom: 0; right: 0; } 
</style>

<div class="containerdiv">
  <img border="0" height="188" src="myImg" width="133" />
  <img class="cornerimage" height="140" src="imageOnTop" width="105" />
</div>

For the 7th image, when I'm trying to start a new row, I'm simply replacing the 'containerdiv' class with 'containerdivNewLine'.

解决方案

You need to "clear" the float after every 6 images. So with your current code, change the styles for containerdivNewLine to:

.containerdivNewLine { clear: both; float: left; display: block; position: relative; } 

这篇关于如何在使用float之后得到一条新线：left？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！