3列响应式布局

Question

我正在尝试做3列响应式布局。它也适用于IE8。所以我使用float: left作为行中的元素，但我遇到了一些麻烦：

1. 行中的最后一张图片有意想不到的高度。我知道它发生的原因是.news_preview { width: 100%; }，但我不明白如何解决它。
2. .news__item元素应具有相同的height = 100%。我知道如何使用JavaScript修复它，但是可以使用css修复它仅适用于.news__item的{​​{1}}元素吗？

示例：https://jsfiddle.net/3nxetb45/1/

Answer 1

嗯，你应该注意的几点。我已从.main中删除了height:100%，并在div之后使用了clear:both。

关于使用clear：both，在浮动元素之后使用它们，这样就没有额外的高度或空间问题了。

关于第二个问题，我已将display:table用于主要元素，将display:table-cell用于子级，并移除float:left以获得所需的输出。我们还替换了底边以获得结果。有关详细信息，请查看小提琴..

检查here