css 为什么我的边栏没有填充到边框的边缘？

mspsb9vt 于 2023-01-22 发布在其他

关注(0)|答案(2)|浏览(166)

我尝试在一个父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>

css

来源：https://stackoverflow.com/questions/75187999/why-is-my-sidebar-not-filling-to-the-edge-of-my-border

2条答案

按热度按时间

pgx2nnw81#

你可以用flexbox做类似的事情，把outline放在父节点上，然后用负边距移动子节点来掩盖outline。

.page-wrapper {
  margin: 15px;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  height: 400px;
  outline: 5px dashed green;
}

.column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
  align-items: stretch; 
  background-color: red;
  margin: -5px;
  padding: 10px;
}

.column.left {
  border-right: 0px;
}

.column.right {
  border-left: 0px;
  background-color: yellow;
}

<div class='page-wrapper'>
  <div class='row'>
    <div class='column left'>
      Column 1
    </div>
    <div class='column right'>
      Column Two
    </div>
  </div>
</div>

赞(0）回复(0）举报 2023-01-22

5kgi1eie2#

试试这个，这是你想达到的目标吗？

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: 681px;
   width: 200px;
   float: right;
   background-color: #FEDA6A;
   top: -3px;
  right: -3px;
}
    

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

赞(0）回复(0）举报 2023-01-22

我来回答

css 为什么我的边栏没有填充到边框的边缘？

2条答案

相关问题

热门标签

最新问答