gpt4 book ai didi

html - 不滚动时比屏幕宽三个 div

转载 作者:太空宇宙 更新时间:2023-11-04 00:15:56 26 4
gpt4 key购买 nike

我有一个页面需要维护,但其他人开发的很差。现在对我来说,每一次改变都是一次真正的考验。现在页面看起来基本上是这样的:

 ____________________
| |
| body |
| |
| |
| width: 1000px |
| |
| |
|____________________|

我想添加一些带有链接的 div,所以页面应该如下所示:

 _______ ____________________ _______
| left | | right |
| 400px | body | 400px |
| width | | width |
|_______| |_______|
| width: 1000px |
| |
| |
|____________________|

主体应该居中,并且取决于窗口大小,左右 div 应该完全显示或只显示部分。我在网上搜索了类似的问题并尝试了不同的解决方案,但它们导致页面崩溃并且页面元素困惑。

如何轻松添加这些 div?

最佳答案

检查这个 fiddle :http://jsfiddle.net/GSygt/

在上面的 fiddle 中,在您的 CSS 中将中心内容的宽度更改为 1000px。我使用了 200px,以便结果在 jsfiddle 输出 Pane 中可见。

HTML

<html>
<body>
<div class="center">

This is my content!

<div class="side left">LEFT</div>
<div class="side right">RIGHT</div>
</div>
</body>
</html>

CSS

body {
overflow-x: hidden;
}
.center {
position: relative;
width: 200px; /* change this to 1000px */
background-color: #dfd;
margin: auto;
text-align: center;
min-height: 600px;
}
.side {
position: absolute;
width: 400px;
top: 0;
background-color: #ddd;
text-align: center;
min-height: 200px;
}
.left {
left: -400px;
}
.right {
right: -400px;
}

关于html - 不滚动时比屏幕宽三个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11293598/

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