Question

我该怎么办？我无法填充侧面的空白区域，我是否可以在css中完成（因此它也适用于浏览器缩放）

这是我的代码（简化），因为没有什么对我有效，我提供了一个原始代码

＆＃13;

<html>
<head>
    <style>        
        #parent {
            width: 1000px;
            height: 1000px;
            background-color: #0ff;
        }
        
        .child {
            width: 400px;
            height: 200px;
            margin: 20px;
            background-color: #f00;
            float: left;
        }
    </style>
</head>
<body>
    <div id="parent">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>
</html>

＆＃13;

Answer 1

使用flexbox

Fiddle demo

＆＃13;

#parent {
  display: flex;
  flex-wrap: wrap;
  background-color: #0ff;
}
.child {
  flex: 1 0 auto;
  width: 400px;
  height: 200px;
  margin: 20px;
  background-color: #f00;
}

＆＃13;

<div id="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>

＆＃13;

Answer 2

设置父容器的样式（如果没有容器然后创建它），如下所示

.parent {
display:flex;
flex-wrap:wrap;
}

.child {
flex: 1;
width: 45%;  /* whatever you want on the bigger screen */

@media ( min-width : 500px ) {

    .child {
       width:100% ;
    }
}

Answer 3

Flexbox非常擅长这类事情：

Demo on Codepen（或在下面运行）

＆＃13;

div.out {
  border: #f00 solid 1px;
  width: 500px;
  height: 300px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
div.out div.flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  border: #00f dashed 1px;
  width: 100%;
}
div.out div.flex div.in {
  min-width: 300px;
  border: #008000 solid 5px;
  height: 100px;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
div.out div.flex div.in h2 {
  font-size: 2rem;
}


/* Below : just for the animation */

div.out {
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-name: changewidth;
          animation-name: changewidth;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
}
@-webkit-keyframes changewidth {
  from {
    width: 300px;
  }
  to {
    width: 800px;
  }
}
@keyframes changewidth {
  from {
    width: 300px;
  }
  to {
    width: 800px;
  }
}

＆＃13;

<div class="out">
  <div class="flex">
    <div class="in">
      <h2>Content1</h2>
    </div>
    <div class="in">
      <h2>Content2</h2>
    </div>
  </div>
</div>

＆＃13;

按位置分辨CSS位置和缩放对象

3 个答案: