インライン ブロックをラップする代わりに縮小しようとしています。画像は次のように配置されます。
ああああああああ
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;
}
ありがとう!