目前我正在使用http://jsfiddle.net/ngZdg/
最终,我正试图让一个视差网站进行,但我正在努力解决最初的布局问题。我正在尝试获得以下布局:
-------------------------------------
| |
| |
| ______ ______ |
| | | | |
| | | | |
| ______ ______ |
| | | |
| | | |
| ______ |
| |
-------------------------------------
有什么建议吗?
答案 0 :(得分:1)
尝试this:
@charset"utf-8";
#main {
background-color:pink;
width:1280px;
height:100%;
position:absolute;
}
#chapter1 {
background: blue;
width:90%;
height:90%;
}
#chapter1_1 {
background-color:red;
width:100px;
height:100px;
left:100px;
top:50px;
position:absolute;
}
#chapter1_2 {
background-color:yellow;
width:100px;
height:100px;
left:205px;
top:50px;
position:absolute;
}
#chapter1_3 {
background-color:green;
width:100px;
height:100px;
top:155px;
left:205px;
position: absolute;
}
您还需要关闭<DIV>
代码。
<div class="whatever" />
不正确,需要
<div class="whatever"></div>
答案 1 :(得分:1)
你关闭你的div的方式并没有在小提琴中关闭它们。这会创建类似于图表的内容。
<div id="main">
<div id="chapter1">
<div id="chapter1_1"></div>
<div id="chapter1_2"></div>
<div id="chapter1_3"></div>
</div>
</div>
CSS:
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
#main {
background-color:#00FF00;
width:100%;
height:100%;
/*position:absolute;
left:50%;
margin-left:-640px;*/
}
#chapter1 {
background: blue;
height:100%;
position:relative;
width:100%
}
#chapter1_1,
#chapter1_2,
#chapter1_3 {
height:20%;
width:20%;
position:absolute;
}
#chapter1_1 {
background-color:red;
top:10%;
left:30%;
}
#chapter1_2 {
background-color:yellow;
left:50%;
top:10%;
}
#chapter1_3 {
background-color:green;
top:30%;
left:50%;
}
答案 2 :(得分:0)
我已经更新了小提琴,背景是绝对的,而其他div在定位中是相对的
Please refer link http://jsfiddle.net/MarmeeK/ngZdg/19/
CSS就像这样
@charset"utf-8";
#main {
background:pink;
width:1280px;
height:900px;
position:absolute;
top:0;
left:0;
bottom:0;
margin:0;
padding:0;
}
#chapter1 {
margin:100px auto 100px auto;
background: blue;
height:500px;
width:800px;
padding:100px;
}
#chapter1_1, #chapter1_2, #chapter1_3 {
width:200px;
height:200px;
position:relative;
display:block;
margin:0;
padding:0;
float:left;
}
#chapter1_1 {
background-color:red;
left:100px;
}
#chapter1_2 {
background-color:yellow;
left:100px;
}
#chapter1_3 {
clear:both;// to clear the float to next line.
background-color:green;
left:300px;
}
我确信这样做。 :)