css - 尝试使用 css 排列图像

Question

这是我目前使用的代码。我有 6 张图片，我正在尝试安排它们并使其响应。

思路是这样的 图片-空白-图片

图片-----空格-----图片

 image -blank space - image

当我挤压页面时，它们最终并没有均匀地堆叠在一起。空间需要消失，所以我只有 6 张图像相互重叠。下面是 CSS，然后是 html

.row:after {
  content: "";
  clear: both;
  display: table;
}
/** North Scottsdale */

.nsdl {
  float: left;
  margin: 0 175px;
  padding: 0 0px;
  width: 300px;
  height: 200px;
  border: 3px solid white;
  background-image: url("/images/dphotos/test2a.png");
}
/** break1 */

.break1 {
  float: left;
  margin: 0px;
  padding: 0px;
  width: 95px;
  height: 200px;
  border: 3px solid white;
}
/** Scottsdale */

.sdl {
  float: left;
  margin: 0px;
  padding: 10px;
  width: 300px;
  height: 200px;
  border: 3px solid white;
  background-image: url("/images/dphotos/test2a.png");
}
/** Tempe */

.tmpe {
  float: left;
  margin: 0 35px;
  padding: 10 10px;
  width: 300px;
  height: 200px;
  border: 3px solid white;
  background-image: url("/images/dphotos/test2a.png");
}
/** break2 */

.break2 {
  float: left;
  margin: 10px;
  padding: 10px;
  width: 475px;
  height: 200px;
  border: 3px solid white;
}
/** Downtown */

.dtown {
  float: left;
  margin: 10px;
  padding: 10px;
  width: 300px;
  height: 200px;
  border: 3px solid white;
  background-image: url("/images/dphotos/test2a.png");
}
/** West Side */

.wside {
  float: left;
  margin: 0 175px;
  padding: 0 0px;
  width: 300px;
  height: 200px;
  border: 3px solid white;
  background-image: url("/images/dphotos/test2a.png");
}
/** break1 */

.break3 {
  float: left;
  margin: 0px;
  padding: 0px;
  width: 95px;
  height: 200px;
  border: 3px solid white;
}
/** UPTOWN */

.utown {
  float: left;
  margin: 0 120px;
  padding: 10 10px;
  width: 300px;
  height: 200px;
  border: 3px solid white;
  background-image: url("/images/dphotos/test2a.png");
}

<div class="w3-container">
  <div class="row">
    <div class="left">
      <div class="nsdl" style="text-align: center;">
        <h2> NORTH SCOTTSDALE</h2>
      </div>
    </div>
    <div class="center"> </div>
    <div class="right">
      <div class="sdl" style="text-align: center;">
        <h2>SCOTTSDALE</h2>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="left">
      <div class="tmpe" style="text-align: center;">
        <h2>TEMPE</h2>
      </div>
    </div>
    <div class="center"> </div>
    <div class="right">
      <div class="dtown" style="text-align: center;">
        <h2>DOWNTOWN</h2>
      </div>
    </div>
    <div class="left">
      <div class="wside" style="text-align: center;">
        <h2>WEST SIDE</h2>
      </div>
    </div>
    <div class="center"> </div>
    <div class="right">
      <div class="utown" style="text-align: center;">
        <h2>UPTOWN</h2>
      </div>
    </div>
  </div>
</div>

Answer 1

我建议查看一些框架，例如 Bootstrap、Skeleton 和 Zurb Foundation，并使用它们的 CSS 网格组件。查看他们如何使用 media queries 控制各个页面区域的大小使用移动设备优先的方法。

您当然也可以推出自己的解决方案。这是一个例子。

<div class="img-group">
  <div class="img-holder">
    <img src="http://placehold.it/300x300?text=1">  
  </div>
  <div class="img-holder">
    <img src="http://placehold.it/300x300?text=2"> 
  </div>
  <div class="img-holder">
    <img src="http://placehold.it/300x300?text=3"> 
  </div>
  <div class="img-holder">
    <img src="http://placehold.it/300x300?text=4"> 
  </div>
  <div class="img-holder">
    <img src="http://placehold.it/300x300?text=5"> 
  </div>
  <div class="img-holder">
    <img src="http://placehold.it/300x300?text=6"> 
  </div>
  <div class="img-holder">
    <img src="http://placehold.it/300x300?text=7"> 
  </div>
  <div class="img-holder">
    <img src="http://placehold.it/300x300?text=8"> 
  </div>
  <div class="img-holder">
    <img src="http://placehold.it/300x300?text=9"> 
  </div>
</div>

.img-group img {
  display: block;
  max-width: 100%;
}

.img-holder {
  float: left;
  width: 50%;
}

@media ( min-width: 448px ) {
  .img-holder {
    width: 33.333%;
    padding: 0.75%;
  }
}

@media ( min-width: 779px ) {
  .img-holder {
    box-sizing: border-box;
    width: 25%;
    padding: 2%;
  }
}

演示 JSFiddle .

首先你要让你的图片响应。最简单的做法是将它们设置为 display: block; 和 max-width: 100%;。设置最大宽度意味着它们会尝试占据父元素的宽度，只要它们不超过它们自己的固有宽度。例如，如果父元素的宽度为 700px 而图像的宽度为 600px，则它不会拉伸(stretch)以适应 700px 的空间。它将在 600px 处停止。

现在您将图像放在容器元素中，您将使用 media queries 控制这些元素.使用百分比宽度(即 width: 25%; )让它们保持美观和流畅。

您可能想知道 box-sizing: border-box; 的作用。它表示 padding 应该作为 width 定义的一部分包含在内。通常如果你有 width: 25%; padding: 1%; 元素的总宽度为 27%，即 1% + 25% + 1% = 27%。