Question

这是我目前使用的代码。我有6张图片，我正在努力安排并做出回应。

想法是这样的 image -blank space - image

图像-----空白-----图像

 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，则它不会伸展以适应空间的700px。它将停在600px。

现在，您将图像放置在您使用media queries控制的容器元素中。使用百分比宽度（即width: 25%;），使它们保持良好和流畅。

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

尝试使用css排列图像

1 个答案: