gpt4 book ai didi

html - DIV 元素扩展到浏览器的可见部分之外

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

这个问题源于我之前遇到的关于让 DIV 元素自动扩展 的问题,并且已通过“溢出:全部;”得到更正。

除此之外,我猜这个新问题几乎完全相反,这次 DIVS 扩展到页面底部之外,因此部分 div 不再可见。从玩代码来看,这似乎只发生在我相对定位 DIVS 时。

请参阅 JSFiddle 以获得清晰的示例。几个小时以来,我一直在努力解决这个问题!谢谢。

JSFIDDLE

HTML:

<body>
<div id="container">
<div id="block1">
<div id="one">one</div>
</div>
<div id="block2">
<div id="two">two</div>
<div id="three">three</div>
<div id="four">four
<br />four
<br />four
<br />four
<br />four
<br />four
<br />four
<br />four
<br />four
<br />four
<br />four
<br />four
<br />four
<br />four
<br />four
<br />four
<br />four
<br />four
<br />four
<br />four
<br />four
<br />four
<br />four
<br />four
<br />four
<br />four
<br />four
<br />
</div>
</div>
</div>
</body>

CSS:

#container {
width: 1050px;
margin: auto;
padding: 5px;
background-color: #ededf0;
background: url("http://wguayan.comuv.com/brushed_metal_clear_apple.jpg") repeat;
}
#one, #two, #three, #four {
border-width: 1px;
border-color: black;
border-style: solid;
background-color: white;
border-radius:6px;
-moz-border-radius:6px;
/* Firefox 3.6 and earlier */
}
#one {
float: right;
width: 100px;
position: relative;
top: 0px;
left: 0px;
padding: 10px;
box-shadow: 9px 9px 12px #888888;
}
#two {
float: left;
width: 100px;
position: relative;
top: 0px;
left: 0px;
padding: 5px;
text-align: center;
box-shadow: 9px 9px 12px #888888;
}
#three {
float: right;
width: 100px;
position: relative;
top: 150px;
right: 30px;
padding: 10px;
box-shadow: 9px 9px 12px #888888;
}
#four {
float: right;
width: 100px;
position: relative;
top: 300px;
right: 40px;
padding: 10px;
box-shadow: 9px 9px 12px #888888;
}
#block1 {
width: 100%;
overflow: hidden;
border-width: 1px;
border-color: black;
border-style: solid;
}
#block2 {
width: 100%;
overflow: hidden;
border-width: 1px;
border-color: black;
border-style: solid;
}

最佳答案

您的 CSS 中存在很多不良做法,而不是尝试提供固定的 jsfiddle,或许稍微了解一下 CSS 布局可能会有所帮助。

所以请花点时间回顾一下http://learnlayout.com/

关于html - DIV 元素扩展到浏览器的可见部分之外,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19968688/

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