gpt4 book ai didi

html - 如何包装整个布局?

转载 作者:太空宇宙 更新时间:2023-11-03 23:06:17 25 4
gpt4 key购买 nike

通常 background_wrapper 会这样做,但左列未对齐。只有当它没有绝对定位时。

有没有办法不管包含的元素是什么,内容都会在一定的宽度内对齐?整理一切。

我取出 positiong: absolute,然后对齐。但是如果我稍后应用绝对定位呢?

将网站包装成 1024px 的好方法是什么?

#wrapper {
margin: 0 auto;
margin-top: 25px;
width: 960px;
}

body {
background: repeating-linear-gradient( 45deg, transparent, transparent 10px, #ccc 10px, #ccc 20px), /* on "bottom" */
linear-gradient( to bottom, #fff, #999);
}

#header {
background-color: blue;
left: 55px;
top: 15px;
width: 910px;
height: 50px;
z-index: 4;
}

#nav_left {
background-color: blue;
position: absolute;
left: 60px;
top: 140px;
width: 140px;
height: 280px;
z-index: 12;
}
<!DOCTYPE>
<HTML>

<head>

<title>UNAWAKENED.NET - Welcome!</title>

<link rel="stylesheet" href="index.css">

<body>

<section id="wrapper">

<div id="header">Header</div>

<section id="nav_left"></section>

</section>
</body>

最佳答案

根据 this MDN article , 绝对定位元素:

Do not leave space for the element. Instead, position it at a specified position relative to its closest positioned ancestor or to the containing block. Absolutely positioned boxes can have margins, they do not collapse with any other margins.

这意味着如果你想让你的 position: absolute 元素完全受到你的 #wrapper 的影响,你需要给 #wrapper 一个 position 属性。否则,它将默认为包含 block ,在本例中为浏览器窗口。

截至目前,您已经应用了 topleft 属性,但这些属性是相对于浏览器窗口的左上角的。您将希望您的 #nav_left 相对于包装器定位自身,这意味着 #wrapper 需要一个位置属性。试试这个:

#wrapper {
margin: 0 auto;
position: relative;
margin-top: 25px;
width: 960px;
}

关于html - 如何包装整个布局?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34627938/

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