如何在html中在两个图像旁边放置垂直hr行_Html_Css

如何在html中在两个图像旁边放置垂直hr行

html css

如何在html中在两个图像旁边放置垂直hr行,html,css,Html,Css,我试图使一个网站页面有一个大标题的照片，一条水平线下面和两个图像。除了这些图像，我想添加一个垂直的hr行，显示缩进。我尝试过这样做，但它只是使我的代码迷失方向，无法工作。我已经研究过这个问题，但目前还没有在线资源。非常感谢您的帮助。下面是我的代码： <html> <head> <style> .img1 { min-width: 100%; } .bikeimg { width: 50%; height: 350px;

我试图使一个网站页面有一个大标题的照片，一条水平线下面和两个图像。除了这些图像，我想添加一个垂直的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>

再次感谢您的帮助。谢谢

我用div替换了您的hr，并调整了图像的宽度，使div适合您。另外，由于您的宽度百分比，边框解决方案在这里不起作用，这将获得超过100%的大小，并将第二个图像向下推

.img1{ 最小宽度：100%； } 比基姆先生{ 宽度：49.9%；高度：350px；利润上限：-8px；左边距：0px；浮动：左； } .自行车{ 文本对齐：居中； } .硬币{ 宽度：49.9%；高度：350px；显示：内联块；浮动：对；利润上限：-8px； } .头衔{ 文本对齐：居中；字号：80px；字体系列：“Oswald”，无衬线；利润上限：-320px；文字装饰：下划线； } .垂直人力资源{ 利润上限：-8px；宽度：0.2%；高度：350px；浮动：左；背景色：黑色； } 首先是hr_先生{ 利润上限：200px； } 我们的建议

没有垂直hr，请使用带边框的div代替Ok。我以前尝试过添加，但效果不太好。你能把它合并到代码中吗。很抱歉打扰你。非常感谢大家的帮助，正如@Isac所指出的，水平规则并不是毫无意义的。是的，我现在理解了这个概念。我以前见过一个问题，它让我明白了这一点！看起来很棒。我试着让垂直线变粗，但没用。我可以更改不重要的图像大小。只需要清楚地表明他们是分开的。非常感谢你的帮助！由于某些原因，原始的hr消失了试着在本地运行它，我可以在浏览器的本地文件中看到它，只是好像没有出现在我刚刚做的实时代码片段中。水平线可以让垂直线更粗，更清晰。我已经试过了，但是不行