Css 在两个div之间有一个空白，这让人很难过

我的一个客户要求我接受他的代码并使其响应；他过去常常将新闻分为两栏（左侧/右侧），为了响应，我不得不去掉这两栏，将所有新闻放在彼此旁边，但我在两行之间留了一个空白（第二栏新闻宽度将第三栏新闻推到了另一行）

这就是html的外观

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

}

.noticia{
宽度：335px；
背景：#F0EEFF；
显示：内联块；
填充：.3em0；
左侧填充：0.3em；
垂直对齐：顶部；
}
.noticia>img、.noticia.video、.noticia iframe{
宽度：335px；
最大宽度：99%；
}

使用

显示：内联块时，有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的正常工作方式。下一个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;
}

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

因此，如果项目顺序必须从左到右，那么您需要使用javascript解决方案，如。
有一个关于您的困难的工作片段会很好。那会对你有帮助的！是的，对不起，乔恩，你会考虑使用<代码>浮点：左边；<这是我最初的想法，但它没有改变任何东西，它看起来几乎一样，空白处仍然可以使用列css设置仅宽度，它将在允许1到x列的任何列空间中打断。否则你可以使用mediaqueries或者用JavaScriptpt来解决这个问题（比如）它不是最好的，因为它至少需要
IE10
他没有提到任何浏览器要求，加上IE<11版本目前已被弃用，即使微软没有这样做，我们也不应该继续支持这些版本：评论副本：“如果新闻仍然是内联块，那么您已经在这里有了回退，间隔为couse“是的，您不再需要显示：内联块，当然，您可以删除它。我用所有的代码编辑了我的答案，我认为你的问题是行之间的空白。你要找的布局怎么样？不是两列吗？我想我遗漏了一些东西……这并不是因为盖普·威奇在这里（浮动会保持不变），问题是不同高度的箱子一排一排地移动。你看到截图上的红色箭头了吗？
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;
}