居中div div中的div
问题描述:
我确定我在这里错过了一些东西......所以我尽可能多地忽略了我的问题,所以这很有道理。 (我在使用CSS方面有点新手)。居中div div中的div
为了澄清,我制作了一张图表,显示了我正在努力完成的任务,但似乎无法正确完成,而且我一整天都在努力。我需要一个100%宽的标题div,中间的内容和100%宽的页脚div。我的页脚div始终在我的内容区域后面上升。 CANT弄明白了。
<div id="HEADER"></div>
<div id="CONTENT">
<div id="contentwrap">
<div id="top-left-photo"></div>
<div id="top-right-date"></div>
</div>
</div>
<div id="FOOTER"></div>
我还包含一个小提琴: http://jsfiddle.net/b9kah2wx/
谢谢!!
答
我做了一些更改您的jsfiddle http://jsfiddle.net/b9kah2wx/2/
#HEADER {
height:300;
width: 100%;
}
#CONTENT {
background-color: #C0F;
height:auto;
width: 100%;
}
#FOOTER {
background-color: #C00;
height:500px;
width: 100%;
}
#contentwrap {
width: 66%;
height: auto;
margin: 0 auto;
background-color:#0ff;
}
#top-left-photo {
float:left;
height: 180px;
width: 40%;
margin-right: 15px;
background-color: #555555;
font-family:"Dirty";
}
#top-right-date {
float:left;
height: 180px;
width: 40%;
margin-right: 0px;
background-color: #555555;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
您会注意到我将固定宽度更改为百分比,以便我可以在jsfiddle中使用它,但基本想法就在那里。
您还需要清除您的float:
ed元素,以便父母div#contentwrap
身高问题得到解决。我已经为你添加了这个代码。
,这是你的HTML
<div id="HEADER"><h1>header</h1></div>
<div id="CONTENT">
<div id="contentwrap">
<div id="top-left-photo">photo</div>
<div id="top-right-date"> date</div>
<div class="clearfix"></div>
</div>
</div>
<div id="FOOTER"></div>
答
这样做:下面的代码添加到你的CSS文件
* {
margin: 0 auto; /* Centers everything with a given with except when floated or altered with margin and position properties */
}
注:这一点很重要,你清楚你的花车为Paulie_D提到
你需要清除花车也。 – 2014-11-24 20:49:28