我想在页面的每一侧(左和右)有两条垂直线，我看到了几种方法来做到这一点，其中一些是在 Stack Overflow 中建议的，但没有一个解决了这个小问题有。
我想要实现的目标:
我如何尝试实现它:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Enter Title Here</title>
<style type="text/css">
body {
background-color: #BCD2EE;
margin-left: 20%;
margin-right: 20%;
padding: 10px 10px 10px 10px;
}
.verticalLine {
border-left: thick solid #4876FF;
border-right: thick solid #4876FF;
}
</style>
</head>
<body>
<div class="verticalLine">
<h3 style="color:#1912D8">Welcome!</h3>
<div><p style="float: left; padding: 5px 30px 10px 50px;"><img src="default.jpg" height=350 width=350></p></div>
<div><p style="font-size:20px;">
<br>Text
<br>Text
<br>Text
</p></div>
</div>
</body>
</html>
我实际得到的是:
请注意，垂直线不会一直向下，并且仅包含文本，而不包含图像或整个页面。
我该如何修复它才能得到我想要的东西？
最佳答案
您只需在 .verticalLine div 上添加 overflow:hidden; 属性即可实现此目的
.verticalLine {
border-left: thick solid #4876FF;
border-right: thick solid #4876FF;
overflow:hidden;
}
关于html - 在包含图像和文本的 html 页面中创建垂直线，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25203708/