gpt4 book ai didi

css - 为什么我的 div 不采用其父 div 的宽度?

转载 作者:行者123 更新时间:2023-12-04 08:54:35 25 4
gpt4 key购买 nike

我有一个标题 div我想采用与其父级相同的宽度 div ,以内容为中心。截至目前,div缩小到其内容的宽度,使其偏离中心。
enter image description here
什么不起作用 :

  • 根据 this thread ,从父 div 继承宽度应该是默认行为,或者可以用 width: auto 加强。 ,但这似乎在我的网站上没有生效。
  • 设置 width: 100%使标题太宽。
  • 更改为 position: relative对我来说不是一个选择,因为那时
    标题将不再是粘性的。
  • 将宽度硬编码为
    固定宽度并不理想,因为我希望页面可以调整大小。
  • 指定固定 max-width同样使
    标题缩小到其内容宽度。
  • width: inherit没有
    一种效果,要么。

  • 问题 :
    为什么另一个线程中提出的解决方案不适用于我的情况?
    如何制作 header具有与 container 相同的宽度?

    body {
    max-width: 1200px;
    margin: auto;
    }

    nav {
    height: 100%;
    width: 250px;
    position: fixed;
    overflow-x: hidden;
    margin-top: 100px;
    }


    #container {
    margin-left: 250px;
    }

    #header {
    position: fixed;
    top: 0;
    height: 100px;
    background: white;
    border: 1px solid lightgray;
    }
    <!DOCTYPE html>
    <html id="top">

    <head>
    <link rel="stylesheet" href="style.css">
    </script>
    </head>

    <body>

    <nav id="nav">
    <li><a href="#sec1">Section 1</a></li>
    <li><a href="#sec2">Section 2</a></li>
    <li><a href="#sec3">Section 3</a></li>
    </nav>

    <div id="container">

    <div id="header">
    <h1><a href="#top">Title</a></h1>
    </div>

    <div id="content">
    <section id="sec1">
    <h2><a href="#sec1">Section 1</a></h2>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p></section<
    </div>

    </div>

    </body>

    </html>

    最佳答案

    有几种方法可以实现您想要的。我确实理解为什么你需要用我认为你想要实现的东西来修复它。这也是造成问题的原因。设置位置“固定”从文档流中删除元素。
    因为您已经对左导航宽度进行了硬编码,所以将以下内容添加到您已有的内容中会为您工作。

        #header {
    right:0;
    left:250px;
    }
    如果要将固定元素与内容对齐,则需要考虑几件事。
  • 主体的最大宽度为 1200 像素。这意味着,您在弄清楚这一点时必须考虑到这一点,这可能会变得棘手。
  • 如果不使用其他引用,您永远无法准确了解自动 margin 。
  • 对于小于 1200px 的屏幕,您需要添加媒体查询。任何低于 100% 的值都不会在 1200px 以下正常工作。此外,为了对齐右边缘,您需要为 #content 添加固定边距。并右偏移标题相同的数量。如果你不关心右边缘,你可以随意偏移标题。

  •     #content {
    /* ... other css you had */
    margin-right:15px;
    }
    #header {
    /* ... other css you had */
    text-align:center;
    left: 250px;
    right: 15px;
    }
    @media screen and (min-width: 1200px) {
    #content {
    margin-right:0;
    }
    #header {
    left: calc(((100% - 1200px ) /2) + 250px);
    right: calc((100% - 1200px) /2);
    }
    }
    所以所有这些都会起作用,但是 calc减慢渲染(一些),我的感觉是这将是你最终不得不在 future 改变的东西。我建议寻找另一种方法来实现您的目标。但是,在您给出的限制范围内,上述方法将起作用。

    关于css - 为什么我的 div 不采用其父 div 的宽度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63910413/

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com