Question

我想在200px200px的盒子里放五张图片。在四个角，四个图像和中心一个图像。我如何用HTML和CSS做到这一点？

我试过这个，但我无法弄清楚如何做到这一点。

 <!DOCTYPE html>
<html>
<head>
    <title></title>

    <style type="text/css">
    .box{
        border: 1px solid black;
        width: 200px;
        height: 200px;
        background-color: aqua;

    }

    body{
        text-align: center;


    }

    .img1{
        float: left;
    }

    .img3{
        float: right;
    }

    .img4{
        float: right;
    }

    .img5{
        float: right;
    }
    </style>
</head>
<body>

<div class="box">
    <img src="frog.jpg" class="img1">

    <img src="frog.jpg" class="img2">

    <img src="frog.jpg" class="img3">

    <img src="frog.jpg" class="img4">

    <img src="frog.jpg" class="img5">

</div>

</body>
</html>

Answer 1

对角落中的图像使用绝对定位，并使用line-height技巧垂直居中中间图像。

＆＃13;

.images {
  width: 200px;
  height: 200px;
  line-height: 200px;
  position: relative;
  border: 1px solid #000;
  text-align: center;
}

.topleft {
  position: absolute;
  top: 0;
  left: 0;
}

.topright {
  position: absolute;
  top: 0;
  right: 0;
}

.bottomleft {
  position: absolute;
  bottom: 0;
  left: 0;
}


.bottomright {
  position: absolute;
  bottom: 0;
  right: 0;
}

.center {
  vertical-align: middle;
}

＆＃13;

<div class="images">
  <img src="http://lorempixel.com/50/50/" class="topleft">
  <img src="http://lorempixel.com/50/50/" class="topright">
  <img src="http://lorempixel.com/50/50/" class="bottomleft">
  <img src="http://lorempixel.com/50/50/" class="bottomright">
  <img src="http://lorempixel.com/50/50/" class="center">
</div>

＆＃13;

将图像放在HTML中的div框中

1 个答案: