0

我正在尝试创建一个包装器，其中包含 4 个彼此相邻的 div（两个彼此相邻，其余两个在它们下方）。然而问题是，只有第四个出现了。我尝试使用显示属性设置溢出：隐藏，玩具，还尝试使用浮动：左和浮动：右。然而到目前为止还没有运气。

这是我正在使用的 CSS：

html, body{
width: 100%;
height: 100%;
}

#wrapper{
width: 60%;
height: 60%;
top: 20%;
left: 20%;
position: relative;
overflow: hidden;
border: 1px solid #000;
}

#one{
background-color: red;
width: 50%;
position: absolute;
height: 50%;
}

#two{
background-color: green;
width: 50%;
position: absolute;
height: 50%;
}

#three{
background-color:blue;
width: 50%;
position: absolute;
height: 50%;
}

#four{
background-color: yellow;
width: 50%;
position: absolute;
height: 50%;
}

这是随之而来的 html 代码：

<html><head>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head><body>
<div id="wrapper">
    <div id="one">a</div>
    <div id="two">b</div>
    <div id="three">c</div>
    <div id="four">d</div>
</div>
</body></html>

谁能弄清楚为什么黄色（四个）div 是唯一显示自己的，即使我让它向右浮动而其他人向左浮动？（此外，我还想知道为什么会出现滚动条，因为宽度：100% 和高度：html,body 部分中的高度：100%。）

4

3 回答 3

2

浮动你的内在元素。看这里：

http://jsfiddle.net/dkGBA/1/

主要变化：

.child
{
    width: 50%;
    height: 50%;
    float: left;
}

<div id="one" class="child">a</div>
<div id="two" class="child">b</div>
<div id="three" class="child">c</div>
<div id="four" class="child">d</div>
于 2012-07-24T14:56:58.757 回答
1

那是因为您在所有四个 div 上都将位置设置为绝对位置。然后，您必须使用顶部、底部、右侧或左侧来定位它们。当您绝对定位一个元素时，它会从文档流中取出。

jsFiddle 示例

CSS

#one{
background-color: red;
width: 50%;
position: absolute;
height: 50%;
}

#two{
background-color: green;
width: 50%;
position: absolute;
height: 50%;
right:0;
top:0;
}

#three{
background-color:blue;
width: 50%;
position: absolute;
height: 50%;
left:0;
bottom:0;
}

#four{
background-color: yellow;
width: 50%;
bottom:0;
right:0%;
position: absolute;
height: 50%;
}

第二种选择是删除绝对定位，并将它们全部浮动。

jsFiddle 示例

CSS：

#one,#two,#three,#four {
float:left;
}
​
于 2012-07-24T14:56:57.460 回答
1

不要为此使用位置，而是使用浮动。

例子：

http://jsbin.com/ucofed/edit

于 2012-07-24T15:00:16.037 回答