Question

我有一个内部有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>

为什么只有第一个框调整大小？

Answer 1

div正在正确调整大小，如果问题是图像没有调整大小，你可以用这个css修复它：

#container_djbanner img{
  max-width: 100%;
}

查看此codepen。

*避免在你的html中使用内联css（这不是一个好习惯）。

CSS宽度百分比不会调整

1 个答案: