3列の応答レイアウト

Question

3列の応答レイアウトを実行しようとしています。それはまたIE8のために働くはずです。だから私は、行の要素のためのfloat: leftを使用していますが、私はいくつかの問題に直面して：

1. を行の最後の画像が予想外の高さを有しています。私はそれが.news_preview { width: 100%; }のために発生することを理解しますが、私はそれを修正する方法を理解していません。
2. .news__item要素は、同じheight = 100%を持つ必要があります。私はJavaScriptを使ってそれを修正する方法を知っていますが、float: left;と私の.news__item要素のCSSを使って修正することは可能ですか？

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

Answer 1

さて、あなたは注意する必要がありますいくつかのポイントがあります。 .mainからheight:100%を削除し、divの後にclear:bothを使用しました。

clearの使用について：両方とも、float要素の直後に使用してください。これにより、余分な高さやスペースの問題は発生しません。

第2号について、私はdisplay:tableをメインエレメントに、display:table-cellを子供に、そしてfloat:leftを削除して、望ましい出力を得ました。また、結果を得るためにボトムボーダーを置き換えました。両方とも慎重かつこれにより、あなたの最後のdivの高さの問題が解決されます。詳細について..あなたが明確使うべき

チェックhere