Question

我的一位客户要我接受他的代码并使其响应;他过去常常用2栏div（左侧/右侧）显示他的新闻，为了回应起见，我不得不摆脱这两个栏目并将所有新闻放在彼此旁边，但我和＃ 39;在行之间得到一个空格（第二个新闻宽度＆＃39; s正在推动第三个新的）

这就是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;

}

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

谢谢！

Answer 1

这是div工作的正常方式。下一个div开始的最后一个结束。在你的情况下，第3个div将始终在第二个div的底部开始，所以它的位置取决于最后一个div的长度。

只有CSS的最近似的解决方案是CSS3列属性：

var gulp = require('gulp'),
    $ = require('gulp-load-plugins')(),
    runSequence = require('run-sequence'),
    vars = require('./js/tasks/variables'),
    requireDir = require('require-dir')('./js/tasks');

gulp.task('production', function(){
    runSequence('sass', 'build');
});

但是这会按照用户通常的预期从上到下排序，而不是从左到右排序。

因此，如果商品订单必须从左到右，您需要使用Masonry之类的JavaScript解决方案。

Answer 2

使用display: inline-block时，有4种方法可以消除空白区间：

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

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

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

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

很难在div之间留出空白

2 个答案: