我正在学习如何使用div作为我制作的布局,我可能有错误的方法,但到目前为止我所尝试的并没有奏效.所以我花了最近2个小时谷歌搜索和测试各种代码,但我似乎无法做到正确.
这是我的css：
@charset "UTF-8";
/* CSS Document */
* {
margin: 0;
}
html{
height: 100%;
}
body {
background-color: #FFF;
background-image: url(images/bckgndPattern.gif);
background-repeat: repeat;
height:100%;
}
h2 {
color:#cccccc;
letter-spacing:4px;
}
#container_shadow {
background-image: url(images/containerShadow.png);
background-repeat: repeat-y;
height: 100%;
width: 920px;
margin-right: auto;
margin-left: auto;
}
#container {
height: 100%;
width: 900px;
margin-right: auto;
margin-left: auto;
background-color: #FFF;
}
#navbar_shadow_top {
background-color: #FFF;
height: 10px;
width: 888px;
}
#navbar {
background-color: #FFF;
height: 50px;
width: 888px;
}
#navbar_shadow_bot {
background-color: #FFF;
height: 10px;
width: 888px;
}
#container_inner {
height: 100%;
width: 888px;
margin-right: auto;
margin-left: auto;
background-color: #FFF;
border-right-width: medium;
border-left-width: medium;
border-top-style: none;
border-right-style: dashed;
border-bottom-style: none;
border-left-style: dashed;
border-top-color: #c8c8c8;
border-right-color: #c8c8c8;
border-bottom-color: #c8c8c8;
border-left-color: #c8c8c8;
}
#banner {
height: 140px;
width: 888px;
}
#content {
background-color: #FFF;
height:auto;
width: 888px;
}
#slide {
background-color: #FFF;
height: 200px;
width: 700px;
position: relative;
left: 132px;
top: 40px;
}
.main {
background-color:#FFF;
width: 590px;
min-height: 200px;
position:relative;
top: 280px;
left: 60px;
clear:both;
}
我的问题是当我用类main创建一个div.内容div不包围div.main.幻灯片div在内容div中似乎没问题.
截至目前,我很确定我的divs嵌套在正确的位置.
这就是我想要实现的目标：
--------------------------------------
- -
- ----------------------- -
- - SLIDE - -
- - - -
- ----------------------- -
- -
- ------------------- -
- - MAIN - -
- - - -
- ------------------- -
--------------------------------------
这是项目的链接：Test
浮动元素时,将其从文档流中取出.因此,父容器不再包含元素.强制父容器包含浮动子项的选项：
1)给容器一个溢出属性：
#container { overflow: auto }
2)同时浮动容器：
#container { float: left }
3)添加第3个子元素,清除前两个浮点数：
.clearingElement { clear: both }
