居中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/

enter image description here

谢谢!!

来源

2014-11-24 user3769255

你需要清除花车也。 – 2014-11-24 20:49:28

我做了一些更改您的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>

来源

2014-11-24 20:54:54

这样做：下面的代码添加到你的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:46:16

居中div div中的div

回答

相关问题