0

インライン ブロックをラップする代わりに縮小しようとしています。画像は次のように配置されます。

ああああああああ

CCCCCC

ウィンドウがCIの幅になると、すべての画像が一緒に縮小されます。今私が得ているのは、C が縮小し、B が A の下にラップすることです。親 DIV に whitespace:nowrap を設定すると、A と B はラップされませんが、どちらも縮小されません。これが私のコードです：

<div id="container">
<div class="small_pic"><img a></div>
<div class="small_pic"><img b></div>
<div class="large_pic"><img c></div>
</div>

#container {
margin-left:auto;
margin-right:auto;
width: 486px;
max-width:100%;
}
.small_pic {
width:220px;
max-width:100%;
display:inline-block;
height:auto;
}
.large_pic {

width:480px;
max-width:100%;
display:inline-block;
height:auto;
}

ありがとう！

4

2 に答える 2

0

絶対値ではなく、.small_picの相対幅を使用します。220pxを45％に変更すると、問題がないはずです。

于 2013-02-22T19:26:08.003 に答える
0

私はあなたのコードを調べていました。見落としている要素の 1 つは、px ではなく em または % にすべき要素の幅です。ところで、私はあなたのコードを試していました

<div id="container">
<div class="small_pic">
  <img src="My_Bad_by_PhunkyVenom.jpg" class="firstImg">
  <img src="My_Bad_by_PhunkyVenom.jpg" class="secondImg">
</div>
<div class="large_pic"><img src="My_Bad_by_PhunkyVenom.jpg"></div>
</div>


#container {
margin-left:auto;
margin-right:auto;
width: 50%;
/*max-width:100%;
*/}
.small_pic {
/*width:220px;*/        // You've used pixels
max-width:100%;
display:inline-block;
height:auto;
clear:both;
}
.firstImg,.secondImg{width:50%;float:left;}
.large_pic img{
/*width:480px;*/        //You've used pixels.
width:100%;
display:inline-block;
min-height:100px;
height: 30%;
}

em を使用できます (例: 300px ~ 18.75px)。空白を使用する必要はありません。float-clear を使用するだけです。あなたがそれを得る願っています。

于 2013-02-25T06:42:25.493 に答える