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

回答

相關問題