Question

我试图让我的内嵌块缩小而不是包装。图像排列如下：

AAA BBB

CCCCCC

当窗口变为C的宽度时我希望所有图像缩小在一起。现在我得到的是C缩小和B包在A.如果我设置空格：在父DIV中的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;
}

谢谢！

Answer 1

使用.small_pic而不是绝对的相对宽度 - 将220px更改为45％，你应该很好。

Answer 2

我正在查看你的代码。你错过的一件事是应该在em或％而不是px中的元素宽度。顺便说一句，我正在试验你的代码

<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。希望你明白。

内联块缩小图像

2 个答案: