Question

我正在尝试制作一个网页，其中包含一张大标题照片，下面有一条水平线和两张图片。除了这些图像，我想添加一个显示缩进的垂直hr行。我试图这样做，但它只是迷惑了我的代码，并没有工作。我已经调查了这个问题，但目前没有在线找到任何资源。任何帮助是极大的赞赏。以下是我的代码：

<html>
<head>
<style>

.img1 {
    min-width: 100%;    
}

 .bikeimg {
    width: 50%;
    height: 350px;
    margin-top: -8px;
    margin-left: 0px;
    float: left;
 }

 .bike {
    text-align: center;
 }

 .coins {
    width: 50%;
    height: 350px;
    display:inline-block;
    float: right;
    margin-top: -8px;
 }

 .title {
    text-align: center;
    font-size: 80px;
    font-family: 'Oswald', sans-serif;
    margin-top: -320px;
    text-decoration: underline;
 }

.hr_first {
    margin-top: 200px;
}

</style>

<body>

<img src="backgroundfirsttry.jpg" class="img1" height=483>

 <div class="title">Our Proposals</div>

 <hr size="30" color="black" class="hr_first">

 <img src="bikeimg.jpg" class="bikeimg">

 <hr size="5" color="black" height="500">   

 <img src="recycling.jpg" class="coins">

 </body>
 </html>

再一次，非常感谢任何帮助。谢谢！

Answer 1

我将hr替换为div，并调整了图片的宽度，以便div适合。此外边界解决方案由于您的百分比宽度而无法在此处工作，这将超过100％的大小并推下第二张图像。

＆＃13;

<html>
<head>
<style>

.img1 {
    min-width: 100%;    
}

 .bikeimg {
    width: 49.9%;
    height: 350px;
    margin-top: -8px;
    margin-left: 0px;
    float: left;
 }

 .bike {
    text-align: center;
 }

 .coins {
    width: 49.9%;
    height: 350px;
    display:inline-block;
    float: right;
    margin-top: -8px;
 }

 .title {
    text-align: center;
    font-size: 80px;
    font-family: 'Oswald', sans-serif;
    margin-top: -320px;
    text-decoration: underline;
 }

.vertical-hr {
	margin-top: -8px;
	width:0.2%;
	height: 350px;
	float:left;	
	background-color:black;
}
.hr_first {
    margin-top: 200px;
}

</style>

<body>

<img src="backgroundfirsttry.jpg" class="img1" height=483>

 <div class="title">Our Proposals</div>

 <hr size="30" color="black" class="hr_first">

 <img src="bikeimg.jpg" class="bikeimg">
 
 <div class="vertical-hr"></div>

 <img src="recycling.jpg" class="coins">

 </body>
 </html>

＆＃13;

如何在html中的两个图像旁边放置一条垂直hr线

1 个答案: