0

4つのdivが隣り合っているラッパーを作成しようとしています(2つは隣り合っており、残りの2つはその下にあります)。しかし、問題は、4 つ目だけが表示されていることです。オーバーフローを設定しようとしました: 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>

黄色（4）のdivだけが表示されている理由を誰でも理解できますか？(さらに、html,body 部分で width: 100% と height: 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

これは、4 つの 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%;
}

2 番目のオプションは、絶対配置を削除し、それらをすべて左にフロートすることです。

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 に答える