Question

我正在尝试创建一个包装器，其中4个div彼此相邻（两个彼此相邻，下面是剩下的两个）。然而问题是，只有第四个显示出来。我已经尝试设置overflow：hidden，玩具有display属性，并尝试使用float：left和float：right。然而到目前为止还没有运气。

这是我正在使用的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是唯一显示自己的div，即使我让它漂浮正确而其他人离开了？（此外我还想知道为什么因为宽度而出现滚动条：100％和高度：html，身体部分100％。）

Answer 1

浮动你的内心元素。见这里：

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>

Answer 2

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

<强> jsFiddle example

<强> 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 example

CSS：

#one,#two,#three,#four {
float:left;
}

Answer 3

不要使用位置，而是使用浮点数。

示例：

http://jsbin.com/ucofed/edit

将四个div放在一个包装器中，只有一个显示自己

3 个答案: