0

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

AAA BBB

中国交建

当窗口变成 CI 的宽度时，希望所有图像一起缩小。现在我得到的是 C 缩小，B 在 A 下换行。如果我在父 DIV A 和 B 中设置 whitespace:nowrap 不换行，但也不缩小。这是我的代码：

<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

我正在浏览你的代码。您错过的一件事是元素的宽度应该在 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）。您不必使用空白，只需使用浮动清除。希望你能明白。

于 2013-02-25T06:42:25.493 回答
0

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

于 2013-02-22T19:26:08.003 回答