我尝试在一个父div中创建一个右浮动的边栏,使用不同的背景颜色。父div有一个3px的虚线边框,边栏没有一直延伸到边缘。相反,父div的背景颜色在虚线之间可见。
a view of the body of the site
a closer view of the corner, showing that the background does not meet the edge of the border
我试着调整位置,改变元素的顺序,改变高度和宽度,我有点不知所措。
body {
background-image: url("https://i.lensdump.com/i/Rxu5rz.png");
}
@font-face {
font-family: 'Smalle';
src: url("https://files.catbox.moe/x368w4.ttf");
}
.main {
position: absolute;
width: 650px;
height: 675px;
top: 50%;
left: 50%;
margin-top: -325px;
margin-left: -350px;
border: 3px dashed #456655;
background-color: #fff8e5;
font-family: 'Smalle';
}
.sidebar {
position: relative;
height: 675px;
width: 200px;
float: right;
background-color: #FEDA6A;
}
.sidecontent {
text-align: center;
font-family: 'Smalle';
}
.content {
margin-top: 10px;
}
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>TITLE</title>
<link href="1styles.css" rel="stylesheet" />
<style>
</style>
</head>
<body>
<div class="main">
<div class="sidebar">
<br>
<div class="sidecontent">
<p>This is where text and links will go... eventually.</p>
</div>
</div>
<div class="content">
<center><span class="title">TITLE</span></center>
<p style="padding: 5px; margin: 6px; width: 425px;">Lorem ipsum dolor sit amet...</p>
</div>
</div>
</body>
</html>
2条答案
按热度按时间pgx2nnw81#
你可以用flexbox做类似的事情,把outline放在父节点上,然后用负边距移动子节点来掩盖outline。
5kgi1eie2#
试试这个,这是你想达到的目标吗?