Question

我正试图在屏幕的每个角落放置4张小图片。我想要这样的东西：

如何使用HTML和CSS实现这一目标？

以下代码显示的图片应该有4个小图片。

div.img {
  border: 1px solid #ccc;
}
div.img:hover {
  border: 1px solid #777;
}
div.desc {
  padding: 15px;
  text-align: center;
}
* {
  box-sizing: border-box;
}
.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}
@media only screen and (max-width: 5000px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

<div class="responsive">
  <div class="img">
    <img src="animals/cat.jpg" alt="Trolltunga Norway" width="600" height="400">
    <div class="desc">Add a description of the image here</div>
  </div>
</div>
<div class="responsive">
  <div class="img">
    <a target="_blank" href="animals/dog.jpg">
      <img src="animals/dog.jpg" alt="Forest" width="600" height="400">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
</div>
<div class="responsive">
  <div class="img">
    <a target="_blank" href="animals/monkey.jpg">
      <img src="animals/monkey.jpg" alt="Northern Lights" width="600" height="400">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
</div>
<div class="responsive">
  <div class="img">
    <a target="_blank" href="animals/fox.jpg">
      <img src="animals/fox.jpg" alt="Mountains" width="600" height="400">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
</div>
<div class="clearfix"></div>

Answer 1

您可以使用flex，margin（自动），order和伪元素来拆分这四个元素以构建基本布局。

下面的示例将四个框放到四个角落，它们可以填充任何内容和内容样式。

＆＃13;

body {
  display:flex;
  flex-flow:row wrap;
  margin:0;
  height:100vh;
  }
/* body:after 
   actually your code gives a container for this */
  .clearfix {
  /*content:'';
  display:block;*/
  width:100%;
  order:1;
  }
.responsive {
  border:solid;
  margin:0;
  }
.responsive:nth-child(1) {
  margin-bottom:auto;
  margin-right:auto;
  order:0;
  }
.responsive:nth-child(2) {
  margin-bottom:auto;
  margin-left:auto;
  order:0;
  }

.responsive:nth-child(3) {
  margin-top:auto;
  margin-right:auto;
  order:2;
  }
.responsive:nth-child(4) {
  margin-top:auto;
  margin-left:auto;
  order:2;
  }

＆＃13;

<div class="responsive">
  <div class="img">
    <img src="animals/cat.jpg" alt="Trolltunga Norway" width="600" height="400">
    <div class="desc">Add a description of the image here</div>
  </div>
</div>
<div class="responsive">
  <div class="img">
    <a target="_blank" href="animals/dog.jpg">
      <img src="animals/dog.jpg" alt="Forest" width="600" height="400">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
</div>
<div class="responsive">
  <div class="img">
    <a target="_blank" href="animals/monkey.jpg">
      <img src="animals/monkey.jpg" alt="Northern Lights" width="600" height="400">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
</div>
<div class="responsive">
  <div class="img">
    <a target="_blank" href="animals/fox.jpg">
      <img src="animals/fox.jpg" alt="Mountains" width="600" height="400">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
</div>
<div class="clearfix"></div>

＆＃13;

Answer 2

您可以： jsfiddle.net/hu7f9d1L 。

Screenshoot：

背后的想法是我们使用一个包含所有孩子/角落的元素，并且使用position: absolute，他们会留在角落里。 如果需要，请使用position: fixed ;可能这样您就不需要使用ul元素并将li更改为div。

尝试调整窗口/ iframe的大小，然后您会看到div元素保留在相应的角落。

屏幕每个角落的4张图片html css

2 个答案: