css - 很难在 div 之间留出空白

Question

我的一个客户让我接受他的代码并使其响应；他过去常常在 2 列 div(左侧/右侧)中显示他的新闻，为了响应速度，我不得不去掉那 2 列并将所有新闻并排放置，但我得到一片空白行与行之间的空间(第二条新闻宽度将第三条新闻推开)

这是html的样子

<main>
<article class="news">blabla</article>
<article class="news">blabla</article>
<article class="news">blabla</article>
<article class="news">blabla</article>
</main>

这是CSS

.news {
width: 335px;
background: #F0EEFF;
display: inline-block;
padding:.3em 0;
padding-left: 0.3em;
vertical-align: top;

.noticia {
	width: 335px;
	background: #F0EEFF;
	display: inline-block;
	padding:.3em 0;
	padding-left: 0.3em;
  vertical-align: top;
}


.noticia>img, .noticia .video, .noticia iframe {
	width: 335px;
	max-width: 99%;
}

		<main> <!-- modulo de notas -->
			<article class="noticia">
				<h6 class="categoria">Internacional</h6>
				<h2>El ministro de economía español visitará este miércoles el pais</h2>
				<img src="images/noticia4.png">
				<div class="bajada">bajada bajada bajada bajadabajada bajadabajada bajada</div>
				<div class="texto-noticia"><p>Será luego de 5 años de ausencia, se reunirá con otros ministros en la casa Rosada</p></div>
				<div>	
				<img src="images/AUDIO.png">
				</div>
				<div class="comentarios">Dejar un comentario - Leer más...<a href="http://www.facebook.com"><img src="images/face.png"></a>   <a href="http://www.twitter.com"><img src="images/twitter.png"></a></div>
				<hr>
			</article>
			<article class="noticia">
				<h6 class="categoria">Internacional</h6>
				<h2>El ministro de economía español visitará este miércoles el pais</h2>
				<img src="images/noticia4.png">
				<div class="texto-noticia"><p>Será luego de 5 años de ausencia, se Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
				cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
				proident, sunt in culpa qui officia deserunt mollit anim id est laborum.reunirá con otros ministros en la casa Rosada</p></div>
				<div class="comentarios">Dejar un comentario - Leer más...<a href="http://www.facebook.com"><img src="images/face.png"></a>   <a href="http://www.twitter.com"><img src="images/twitter.png"></a></div>
				<hr>
				<aside class="banner">
				<img src="images/banner1.png"></img>
				</aside>
			</article>
			<article class="noticia">
				<h6 class="categoria">Internacional</h6>
				<h2>El ministro de economía español visitará este miércoles el pais</h2>
				<img src="images/noticia4.png">
				<div class="texto-noticia"><p>Será luego de 5 años de ausencia, se reunirá con otros ministros en la casa Rosada</p></div>
				<div class="comentarios">Dejar un comentario - Leer más...<a href="http://www.facebook.com"><img src="images/face.png"></a>   <a href="http://www.twitter.com"><img src="images/twitter.png"></a></div>
				<hr>
				<aside class="banner">
					<object width="100%" height="104.53125">
          			<param name="src" value="http://www.supropiositio.com/04-2015/3df40c4be1bd964ca95f9250b5a5f504.swf">
         			 <embed src="http://www.supropiositio.com/04-2015/3df40c4be1bd964ca95f9250b5a5f504.swf" pluginspage="http://www.adobe.com/shockwave/download/" width="100%" height="104.53125">
      				</object>
				</aside>
			</article>
			<article class="noticia">
				<h6 class="categoria">Internacional</h6>
				<h2>El ministro de economía español visitará este miércoles el pais</h2>
				<img src="images/noticia4.png">
				<div class="video"><iframe src="https://www.youtube.com/embed/qGsTlYLbwy4" frameborder="0" allowfullscreen></iframe>
        	</div>
				<div class="texto-noticia"><p>Será luego de 5 años de ausencia, se reunirá con otros ministros en la casa Rosada</p></div>
				<div class="comentarios">Dejar un comentario - Leer más...<a href="http://www.facebook.com"><img src="images/face.png"></a>   <a href="http://www.twitter.com"><img src="images/twitter.png"></a></div>
				<hr>
				<aside class="banner">
				<img src="images/banner1.png"></img>
				</aside>
			</article>
		</main>

谢谢!

Answer 1

这是 div 的正常工作方式。下一个 div 从最后一个结束的地方开始。在你的例子中，第三个 div 总是从第二个 div 的底部开始，所以它的位置取决于最后一个 div 的长度。

仅使用 CSS 的最接近的解决方案是 CSS3 列属性:

main {
   -webkit-column-count: 2;
   -moz-column-count: 2;
   column-count: 2;
   -webkit-column-width: 335px;
   -moz-column-width: 335px;
   column-width: 335px;
}
.noticia {
    background: #F0EEFF;
    padding:.3em 0;
}

但这会将元素从上到下排序，而不是像用户通常期望的那样从左到右排序。

因此，如果元素顺序必须从左到右，您需要使用像 Masonry 这样的 javascript 解决方案。 .