地方在另一個DIV

-1

這裏一個div是我的，我怎麼想的網站設計爲： Design 地方在另一個DIV

，所以我的第一步，我的查詢是我如何滑塊格在頭DIV和我希望它在中心。我的代碼，我使用的是：

<div id="header"> 
<div class="slider"> 
</div> 
</div> 
<div class="content"> 
</div> 
<div class="footer"> 
</div> 


body { 
    margin:0px; 
    padding:0px; 
    background:#fff; 
} 

#header 
{ 
    background:#859685; 
    height:300px; 

} 

.slider 
{ 
    margin-left:auto; 
    margin-right:auto; 
    margin-top:50px; 
    position:absolute; 
z-index:1; 
width:980px; 
height:200px; 
border: 4px #666 solid; 
} 

.content 
{ 
    margin-left: auto; 
    margin-right: auto; 
    margin-bottom:10px; 
    margin-top:10px; 
    width:980px; 
    height:400px; 
    background:#fff; 
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
    border-radius: 3px; 
} 

.footer 
{ 
    margin-top:10px; 
    margin-bottom:10px; 
padding: 0; 
height:300px; 
background:#98AFC7; 
-moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
    border-radius: 3px; 
    background:#111312; 
}

這裏是我的小提琴jsfiddle.net/hdmep/

Thanx提前！

來源

2013-09-22 Shahil M

看看這個Working Fiddle 我改變了大小一點點（所以它會很好看在小提琴）

這是所有關於絕對定位。

此外，如果你只是要使用的背景顏色，使用background-color代替background ，並注意在使用一次margin對各方的一小段路。

CSS：

#header 
{ 
    background-color: #859685; 
    height: 100px; 
    position: relative; /*the slider is now relative to the header*/ 
} 
.slider 
{ 
    position:absolute; 
    width: 80%; /*80% of header*/ 
    height: 50%; /* 50% of header*/ 
    border: 4px #666 solid; 
    top: 70%; 
    left: 10%; 
} 
.content 
{ 
    margin: 10px auto; 
    height: 100px; 
    background-color: azure; 
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
    border-radius: 3px; 
} 
.footer 
{ 
    margin: 10px 0; 
    height: 100px; 
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
    border-radius: 3px; 
    background-color: #111312; 
}

來源

2013-09-22 15:25:09 avrahamcool

更改滑塊類是這樣的：

.slider 
{ 
    margin-left:auto; 
    margin-right:auto;  
    left:0; 
    right:0; 
    margin-top:250px; 
    position:absolute; 
    width:980px; 
    height:200px; 
    border: 4px #666 solid; 
}

來源

2013-09-22 15:06:30

感謝名單！這項工作！ –

試試這個： DEMO

更新滑塊類：

.slider { 
    margin-left: auto; 
    margin-right: auto; 
    bottom: -150px; 
    position: relative; 
    z-index: 1; 
    width: 980px; 
    height: 200px; 
    border: 4px #666 solid; 
}

來源

2013-09-22 15:29:27

地方在另一個DIV

回答

相關問題