Question

我想在页面的每一侧（左侧和右侧）有两条垂直线，我看到了几种方法，其中一些是在Stack Overflow中提出的，但是它们都没有解决这个小问题我有。
我想要实现的目标：

enter image description here

我是如何努力实现它的：

<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>

我真正得到的是：

enter image description here

请注意，垂直线不会完全向下，只包含文本，但不包括图像和整页。
如何修复它以获得我想要的东西？

Answer 1

只需在overflow:hidden; div

上添加.verticalLine属性即可实现此目的

.verticalLine {
    border-left: thick solid #4876FF;
    border-right: thick solid #4876FF;
    overflow:hidden;
}

在包含图像和文本的html页面中创建垂直线

1 个答案: