Div不按预期浮动？

时间：2015-11-04 15:58:57

标签： html css

我的HTML页面存在恼人的问题。 在这里，您可以看到我的网页：http://jgeneration.altervista.org/layout3.html

如果你没有调整浏览器窗口的大小，你会看到它是正确的，但如果你这样做，那么就会发生一些奇怪的事情。当第一行的第二个div变大时，第二行的前三个div会移动到一种新行中。

这就是发生的事情：

Screenshot 1

我希望div像风格一样的瀑布，所以他们必须根据其他人的身高调整自己的位置。

这是我的HTML＆amp; CSS。

<!DOCTYPE html>
<html>
<head>
  <title>Muzic4U</title>
  <link href='https://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
</head>
<body>

<div style="max-width: 100%; background-color: #0099FF; text-align: center; color: #fff; padding: 20px; margin: 0;">
	<h1 style="margin: 0;"> Muzic4U </h1>
</div>

  
<div id="main">
  
  <div class="tab">
	<img src="http://cdn.albumoftheyear.org/album/25168-blast-radius.jpg" />
	<p class="caption"> <b> Insight </b><br> <i>The Blast Radius</i><br>2004</p>
	<div class="dw">
	  <a href="">Download</a>
	</div>
  </div>
  
  <div class="tab">
	<img src="http://static.marapcana.com/wp-content/uploads/2015/05/Orgasmi-Meccanici-cover.jpg" />
	<p class="caption"> <b> Alien Army </b><br> <i>Orgasmi Meccanici</i><br>1999</p>
	<div class="dw">
	  <a href="">Download</a>
	</div>
  </div>
  
  <div class="tab">
	<img src="http://img.maniadb.com/images/album/187/187420_1_f.jpg" />
	<p class="caption"> <b> Surreal & The Sound Providers </b><br> <i>True Indeed</i><br>2003</p>
	<div class="dw">
	  <a href="">Download</a>
	</div>	
  </div>
  
  <div class="tab">
	<img src="https://pbs.twimg.com/media/COxJmdQWcAAFauN.jpg" />
	<p class="caption"> <b> Ohmega Watts </b><br> <i>The Find</i><br>2005</p>
	<div class="dw">
	  <a href="">Download</a>
	</div>
  </div>
  
  <div class="tab">
	<img src="https://pbs.twimg.com/media/COxJmdQWcAAFauN.jpg" />
	<p class="caption"> <b> Ohmega Watts </b><br> <i>The Find</i><br>2005</p>
	<div class="dw">
	  <a href="">Download</a>
	</div>	
  </div>
  
  <div class="tab">
	<img src="https://pbs.twimg.com/media/COxJmdQWcAAFauN.jpg" />
	<p class="caption"> <b> Ohmega Watts </b><br> <i>The Find</i><br>2005</p>
	<div class="dw">
	  <a href="">Download</a>
	</div>
  </div>
  
  <div class="tab">
	<img src="https://pbs.twimg.com/media/COxJmdQWcAAFauN.jpg" />
	<p class="caption"> <b> Ohmega Watts </b><br> <i>The Find</i><br>2005</p>
	<div class="dw">
	  <a href="">Download</a>
	</div>
  </div>
  
  <div class="tab">
	<img src="https://pbs.twimg.com/media/COxJmdQWcAAFauN.jpg" />
	<p class="caption"> <b> Ohmega Watts </b><br> <i>The Find</i><br>2005</p>
	<div class="dw">
	  <a href="">Download</a>
	</div>
	
  </div>
  
  <div class="tab">
	<img src="https://pbs.twimg.com/media/COxJmdQWcAAFauN.jpg" />
	<p class="caption"> <b> Ohmega Watts </b><br> <i>The Find</i><br>2005</p>
	<div class="dw">
	  <a href="">Download</a>
	</div>
  </div>
  
  <div class="tab">
	<img src="https://pbs.twimg.com/media/COxJmdQWcAAFauN.jpg" />
	<p class="caption"> <b> Ohmega Watts </b> <br> <i>The Find</i> <br> 2005 </p>
	<div class="dw">
	  <a href="">Download</a>
	</div>
  </div>
  
  <span class="clear"></span>
  
</div>

<style>
	body {
		font-family: Ubuntu, sans-serif;
        padding: 0;
        margin: 0;
        background-color: #333;
	}
	
		/* unvisited link */
	a:link {
		color: #fff;
	}
	
	/* visited link */
	a:visited {
		color: #fff;
	}
	
	/* mouse over link */
	a:hover {
		color: #fff;
	}
	
	/* selected link */
	a:active {
		color: #fff;
	}
	
	img {
	  display: table-cell;
	  max-width: 100%;
	}
	
	#main {
	  margin: 0 auto;
	  padding: 5px 0 0 5px;
	  max-width: 70%;
	}
	
	.tab {
	  max-width: calc((100% / 5) - 5px);
	  background-color: #666;
	  text-align: center;
	  float: left;
	  display: inline-block; 
	  margin: 0 5px 5px 0; 
	  }
	
	.dw {
	  max-width: 100%;
	  background-color: #000;
	  padding: 10px;
	}
	
	span.clear {
	  clear: left;
	  display: block;
	}
	
	.caption {
	  font-size: smaller;
	}			
    
</style>

</body>

感谢您的支持。

4 个答案:

答案 0 :(得分：2)

这是因为当页面变小时，来自第三个package.json的文本需要多一行。

给你的<p class="caption">以下风格：

.caption

因此所有p-tag都具有相同的高度，浮动将再次起作用。如果它变得更小，它可能需要增加最小高度的px大小。这是一段代码：

＆＃13;
＆＃13; 
.caption {
font-size: smaller;
min-height: 80px;
}
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：2)

Marcel的解决方案很好，但另一种方法是在你的标题上使用这段css代码：

overflow: hidden;
white-space: nowrap; /* Don't forget this one */
text-overflow: ellipsis;

因此，如果你的文字太长（在这种情况下长于4行），它将被'...'取代。这样你就不会得到那些破坏你花车的额外线。

<!DOCTYPE html>
<html>
<head>
  <title>Muzic4U</title>
  <link href='https://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
</head>
<body>

<div style="max-width: 100%; background-color: #0099FF; text-align: center; color: #fff; padding: 20px; margin: 0;">
	<h1 style="margin: 0;"> Muzic4U </h1>
</div>

  
<div id="main">
  
  <div class="tab">
	<img src="http://cdn.albumoftheyear.org/album/25168-blast-radius.jpg" />
	<p class="caption"> <b> Insight </b><br> <i>The Blast Radius</i><br>2004</p>
	<div class="dw">
	  <a href="">Download</a>
	</div>
  </div>
  
  <div class="tab">
	<img src="http://static.marapcana.com/wp-content/uploads/2015/05/Orgasmi-Meccanici-cover.jpg" />
	<p class="caption"> <b> Alien Army </b><br> <i>Orgasmi Meccanici</i><br>1999</p>
	<div class="dw">
	  <a href="">Download</a>
	</div>
  </div>
  
  <div class="tab">
	<img src="http://img.maniadb.com/images/album/187/187420_1_f.jpg" />
	<p class="caption"> <b> Surreal & The Sound Providers </b><br> <i>True Indeed</i><br>2003</p>
	<div class="dw">
	  <a href="">Download</a>
	</div>	
  </div>
  
  <div class="tab">
	<img src="https://pbs.twimg.com/media/COxJmdQWcAAFauN.jpg" />
	<p class="caption"> <b> Ohmega Watts </b><br> <i>The Find</i><br>2005</p>
	<div class="dw">
	  <a href="">Download</a>
	</div>
  </div>
  
  <div class="tab">
	<img src="https://pbs.twimg.com/media/COxJmdQWcAAFauN.jpg" />
	<p class="caption"> <b> Ohmega Watts </b><br> <i>The Find</i><br>2005</p>
	<div class="dw">
	  <a href="">Download</a>
	</div>	
  </div>
  
  <div class="tab">
	<img src="https://pbs.twimg.com/media/COxJmdQWcAAFauN.jpg" />
	<p class="caption"> <b> Ohmega Watts </b><br> <i>The Find</i><br>2005</p>
	<div class="dw">
	  <a href="">Download</a>
	</div>
  </div>
  
  <div class="tab">
	<img src="https://pbs.twimg.com/media/COxJmdQWcAAFauN.jpg" />
	<p class="caption"> <b> Ohmega Watts </b><br> <i>The Find</i><br>2005</p>
	<div class="dw">
	  <a href="">Download</a>
	</div>
  </div>
  
  <div class="tab">
	<img src="https://pbs.twimg.com/media/COxJmdQWcAAFauN.jpg" />
	<p class="caption"> <b> Ohmega Watts </b><br> <i>The Find</i><br>2005</p>
	<div class="dw">
	  <a href="">Download</a>
	</div>
	
  </div>
  
  <div class="tab">
	<img src="https://pbs.twimg.com/media/COxJmdQWcAAFauN.jpg" />
	<p class="caption"> <b> Ohmega Watts </b><br> <i>The Find</i><br>2005</p>
	<div class="dw">
	  <a href="">Download</a>
	</div>
  </div>
  
  <div class="tab">
	<img src="https://pbs.twimg.com/media/COxJmdQWcAAFauN.jpg" />
	<p class="caption"> <b> Ohmega Watts </b> <br> <i>The Find</i> <br> 2005 </p>
	<div class="dw">
	  <a href="">Download</a>
	</div>
  </div>
  
  <span class="clear"></span>
  
</div>

<style>
	body {
		font-family: Ubuntu, sans-serif;
        padding: 0;
        margin: 0;
        background-color: #333;
	}
	
		/* unvisited link */
	a:link {
		color: #fff;
	}
	
	/* visited link */
	a:visited {
		color: #fff;
	}
	
	/* mouse over link */
	a:hover {
		color: #fff;
	}
	
	/* selected link */
	a:active {
		color: #fff;
	}
	
	img {
	  display: table-cell;
	  max-width: 100%;
	}
	
	#main {
	  margin: 0 auto;
	  padding: 5px 0 0 5px;
	  max-width: 70%;
	}
	
	.tab {
	  max-width: calc((100% / 5) - 5px);
	  background-color: #666;
	  text-align: center;
	  float: left;
	  display: inline-block; 
	  margin: 0 5px 5px 0; 
	  }
	
	.dw {
	  max-width: 100%;
	  background-color: #000;
	  padding: 10px;
	}
	
	span.clear {
	  clear: left;
	  display: block;
	}
	
	.caption {
	  font-size: smaller;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
	}			
    
</style>

</body>

答案 2 :(得分：1)

每当你的文字出现两行时，你就会得到这种效果。要改进并实现所需的解决方案，最好的方法是lock。

1.在项目中包含jQuery库：

equal_heights()

2.使用此脚本：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

这是一个jsfiddle：https://jsfiddle.net/6LLgguq0/

答案 3 :(得分：0)

真正的解决方案（对于每行固定数量n项）是对每个第n + 1项应用clear: left;：

#main div:nth-of-type(5n+1) { 
    clear: left; 
}
相关问题
最新问题