0

这个问题源于我之前遇到的让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;
}
4

3 回答 3

2

There are a lot of bad practices going on in your CSS, instead of trying to provide a fixed jsfiddle perhaps a little bit of learning about CSS layouts might do the trick.

So take some time to review please http://learnlayout.com/

于 2013-11-14T03:20:15.470 回答
0

首先，我讨厌你如此努力地让它们漂浮在太空中。它对文档流造成了很大的破坏。

http://jsfiddle.net/H6du7/10/

#block2 {
  width: 100%;
  overflow: hidden;
  border-width: 1px;
  border-color: black;
  border-style: solid;
}

您的问题是“隐藏”方面。如果你让它滚动，或者定义高度以便它适合你，它会让你的生活更轻松。

于 2013-11-14T03:15:04.133 回答
0

#four 定义的位置和大小导致它大于其父级。这

overflow:hidden

#block2 上的 css 导致 #four 的溢出被隐藏。

这是一种可能的解决方案。 http://jsfiddle.net/H6du7/9/

于 2013-11-14T03:16:12.363 回答