我的代码生成此(代码在帖子末尾):
当我拖入时，我希望调整图像的大小，它们确实这样做了(最终我将添加一些代码，在达到一定大小后将它们放置在主图像下方)，但第二个右侧图像的大小会调整到位，而不是停留在其上方图像下方:
知道如何解决吗？这是我的代码:
CSS
body
{
font-family: Arial, sans-serif;
font-size: 16px;
width: 100%;
height: 100%;
}
img
{
width: inherit;
max-width: 100%;
height: auto;
}
#wrapper
{
width: 710px;
max-width: 90%;
margin: 0 auto;
}
#main-column-left
{
max-width: 66%;
float: left;
}
#main-column-right
{
max-width: 33%;
float: right;
border-collapse: collapse;
}
#news-feature
{
width: 470px;
max-width: 100%;
height: 330px;
float: left;
display: block;
}
#news-item-four
{
width: 230px;
max-width: 100%;
height: 160px;
max-height: 100%;
float: left;
margin-bottom: 10px;
}
#news-item-five
{
width: 230px;
max-width: 100%;
height: 160px;
max-height: 100%;
float: left;
}
.clear
{
clear: both;
}
HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="CSS/Styles.css" />
</head>
<body>
<div id="wrapper">
<div id="main-column-left">
<div id="news-feature">
<img src="Images/NewsFeatureImage.jpg" />
</div>
</div>
<div id="main-column-right">
<div id="news-item-four">
<img src="Images/NewsImageFour.jpg" />
</div>
<div id="news-item-five">
<img src="Images/NewsImageFive.jpg" />
</div>
</div>
<br class="clear" />
</div>
</body>
</html>
最佳答案
删除.news-item-four上的固定高度
#news-item-four
{
width: 230px;
max-width: 100%;
/*height: 160px;*/
max-height: 100%;
float: left;
margin-bottom: 10px;
}
目前，图像正在调整大小，但容器(.news-item-four)没有。
关于html - 响应式图像不折叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19978992/