html - 如何将图像与 hr 行与另一个图像 html CSS 对齐？

这就是我想要的:

IMAGE1 ------------- IMAGE2
|                      |
|                      |
|                      |
IMAGE3 ------------- IMAGE4

我无法做到完美对齐。我正在使用 <hr tag>为了对齐方式。请有人帮助我。

这是我的代码:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>IP address</title>
</head>
<body>
<p><hr size = "10" color = "green" width = 20% align = "left">
<a href = "index.php"><img src = "images\router.png" width = "100" height = "100" alt = "Router">Router 1</img></a></hr></p>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<a href = "index.php"><img src = "images\router.png" width = "100" height = "100" alt = "Router">Router 2</img></a>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<a href = "index.php"><img src = "images\router.png" width = "100" height = "100" alt = "Router">Router 3</img></a>


&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;


<a href = "index.php"><img src = "images\router.png" width = "100" height = "100" alt = "Router">Router 4</img></a><br/>
</body>
</html>

请帮帮我

最佳答案

您必须制作一个容器盒并在其中添加 4 个带有图像的 div。使用绝对位置，您可以控制位置。

HTML

<div class="image-box">
  <div class="image image-top-left">
    <img src="http://lorempixel.com/50/50/2"/>
  </div>
  <div class="image image-top-right">
    <img src="http://lorempixel.com/50/50/1"/>
  </div>
  <div class="image image-bottom-left">
    <img src="http://lorempixel.com/50/50/2"/>
  </div>
  <div class="image image-bottom-right">
    <img src="http://lorempixel.com/50/50/2"/>
  </div>
</div>

CSS

.image-box {
  margin: 50px;
  width: 500px;
  height: 500px;
  border: 2px dotted green;
  position: relative;
}

.image {
  position: absolute;
}

.image-top-left {
  top: -25px;
  left: -25px;
}

.image-top-right {
  top: -25px;
  right: -25px;
}

.image-bottom-left {
  bottom: -25px;
  left: -25px;
}

.image-bottom-right {
  bottom: -25px;
  right: -25px;
}

Codepen link

关于html - 如何将图像与 hr 行与另一个图像 html CSS 对齐？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38951955/

html - 如何将图像与 hr 行与另一个图像 html CSS 对齐？

上一篇：css - 简单的 CSS 帮助

下一篇：javascript - 第二个元素没有在第一个元素的第一次调试中同时出现