3列响应式布局

时间:2016-06-23 10:59:33

标签: html css layout

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

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

1 个答案:

答案 0 :(得分:1)

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

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

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

检查here