我有一个容器,里面有 3 个 div
。我正在使用整个页面。所以我很忙,所有百分比,当我裁剪屏幕时,只有第一个 div 调整大小。
代码如下:
#topnews {
margin-left: 1%;
margin-top: 10px;
}
#topnews_bg {
background-color: #F4F4F4;
width: 30%;
height: 187px;
margin-top: 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius:5px;
overflow: hidden;
}
#container_djbanner {
height: 187px;
width:30%;
top:10px;
left: 31.7%;
position: absolute;
}
#container_login {
float: right;
margin-right: 1%;
height: 187px;
width: 31.7% !important;
margin-top: -187px;
background-color: green;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
<div id="topnews">
<div id="topnews_bg">
<div id="slider">
<div id="sliderContent">
<div class="sliderTopstory" style="background: url(assets/img/top3.png);height:187px;">
<div id="topnews_opacity">
<span id="topnews_info">
<b>3e bericht</b><br/>En dan hier weer iets :p
</span>
<a href="#">
<div id="topnews_button">Meer info!</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="container_djbanner">
<img src="assets/img/testdj.png" style="-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;" />
</div>
<div id="container_login">
ds
</div>
为什么只有第一个框调整大小?
最佳答案
div 正在正确调整大小,如果问题是图像没有调整大小,您可以使用此 css 修复它:
#container_djbanner img{
max-width: 100%;
}
看看这个 codepen .
*避免在您的 html 中使用内联 css(这不是一个好习惯)。
关于html - CSS 宽度百分比不调整,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26949304/