如何使hr图像与另一图像对齐HTML CSS？

这就是我想要的东西：如何使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>

帮助我，请

来源

2016-08-15 Paul Kevin

你已经尝试已经什么码？你目前在挣扎着什么？ SO不是“我需要这个;给我代码”服务。你需要提供一些东西来重现你遇到的问题。代码=>答案 –

我很抱歉。这是我的代码

Router Router 1

Router 2

–

什么是你的代码？.. –

你必须做一个容器盒，并添加4个格在它的图像。绝对位置可以控制位置。

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

来源

2016-08-15 11:44:06

非常感谢你，先生让我试试你的代码。 –

先生边界不与我合作。我想要一个

，但它总是与图像重叠 –

如何使hr图像与另一图像对齐HTML CSS？

回答

相关问题