2

私はかなり簡単なレイアウトのテストサイトで作業しています。幅が交互に変わる2列の行に分割されます。私の問題は、何らかの理由で、列divの1つに挿入された画像がdivの100％の高さを占めていないことです。数ピクセル短いです。同じ行の2つの列が「同じ高さ」であるように見える必要があるため、これは問題です。

私が話していることを簡単に確認できるように、画像の問題があるdivの1つに赤い背景を配置しました。かなりシンプルで何かを見落としているだけなのに、今週の月曜日の朝は見つからないようです。どんな助けでも本当にありがたいです。ありがとう！

これが私のテストサイトです：http：//hartsfielddesign.com/test2/test.html

4

6 に答える 6

11

インライン テキストのサイズ/行の高さが原因で、インライン イメージの下部に余分なパディングが含まれることがあります。

画像付きのdivをに設定します

font-size:0;
line-height:0;

http://jsfiddle.net/pxfunc/ZC7Xa/1/

編集：

または、インライン パディングが適用されないように を設定し<img />ます。display:block;

http://jsfiddle.net/pxfunc/ZC7Xa/3/

于 2012-09-10T17:24:20.187 に答える
3

vertical-align:topimages ルールに追加してみてください:

img{
    max-width: 100%;
    width: 100%;
    vertical-align:top;
}

jsFiddle の例

于 2012-09-10T17:27:47.937 に答える
0

あなたが達成しようとしていることを正しく理解していれば、たとえば、<div class="product clearfix color-box">要素に高さの値を設定し、 and 、およびそれらに含まれる をに設定できます200px.vendor.vendor-imagesimgheight: 100%

于 2012-09-10T17:21:13.403 に答える
0

画像の縦横比が間違っています。長すぎます。

簡単にするためにできることは、img タグを使用する代わりに、.vendor-images に背景として画像を与えることです。次に、エラーが発生しないように伸ばすことができます。

左の小さな画像を float:left の値にし、右の float:right を左に 30% の幅、右に 65% の幅を使用することもできます。パディングを設定しないと、残りの 5% がそのパディングになります。

または、単に画像の縦横比を変更することもできます。

于 2012-09-10T17:27:56.250 に答える
0

クラス .box-expand、.color-box-expand のマージンとパディングを削除します。次に、各 div の高さを設定します。その後、正常に動作します。

于 2012-09-10T17:28:25.940 に答える