如何使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？

回答

相關問題