gpt4 book ai didi

html - 在容器 div 之外平均扩展子 div,两侧边距为 : 0 auto

转载 作者:技术小花猫 更新时间:2023-10-29 12:11:04 26 4
gpt4 key购买 nike

假设我有一个包含子 div 的 div。容器 div 设置为 margin: 0 auto,因此当宽度增加时,div 会在两侧扩展。如果这个容器内的 div 也被设置为 margin: 0 auto,有没有办法让这个 div 扩展到它的容器 div 之外,并且向右和向左的距离相等?

下面的例子表明,当 .background 的宽度增加到超过容器的宽度时,它的大小只会从右边增加,而不是从两侧增加。

CSS 和 HTML:

.container {
width: 600px;
background-color: lightgreen;
margin: 0 auto;
}
.background {
width: 300px;
margin: 0 auto;
background-color: blue;
}
.content {
width: 200px;
background-color: lightblue;
margin: 0 auto;
}
<div class = "container">
<div class = "background">
<div class = "content">
content
</div>
</div>
</div>

http://jsfiddle.net/DpYGm/2/

这都是为了让横幅图形背景图像跨越页面的正文宽度,但仍然让页面内部的内容保持不变。

最佳答案

假设您希望 background div 在每一侧突出 50px。你可以在你的 CSS 中这样做:

.background {
margin: 0 -50px 0 -50px;
background-color: #00F;
}

一个完整的例子:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">

.container {
width: 500px;
background-color: lightgreen;
margin: 0 auto;
height: 400px; /* for illustration */
}
.background {
margin: 0 -50px;
background-color: blue;
}
.content {
width: 200px;
background-color: lightblue;
margin: 0 auto;
}

</style>

</head>
<body>

<div class = "container">
<div class = "background">
<div class = "content">
content
</div>
</div>
</div>

</body>
</html>

关于html - 在容器 div 之外平均扩展子 div,两侧边距为 : 0 auto,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16421808/

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