如何對齊的DIV

假設底部的文字，我有兩個DIV如下（標誌和管理員）：如何對齊的DIV

<body id="main_body"> 
<div id="logo_area"> 
<div id="logo"> 
    <image></image> 
</div> 
<div id="admin"> 
    LOG IN 
</div> 
</div> 
</body>

如果我想接下來的div底部的管理對齊。也就是說，它看起來像這樣：

-------------------------------------------- 
IMAGE 
            LOG IN 
--------------------------------------------

我試過下面的CSS，它不起作用。

#main_body { 
margin:0px; 
} 

#logo_area { 
background-color: #086A87; 
height: 60px; 
} 

#logo { 
padding-left:10px; 
float:left; 
width:80%; 
margin-left:auto; 
margin-right:auto; 
} 

#admin { 
bottom:0px; 
}

任何人都可以在這裏請光？

感謝

來源

2013-01-24 Kintarō

嘗試創建一個[的jsfiddle（http://jsfiddle.net）的此代碼 – Ibu

添加position:relative到#logo_area和position:absolute到#admin

#logo_area { 
background-color: #086A87; 
height: 60px; position:relative 
} 
#admin { 
bottom:0; position:absolute; right:0 
}

DEMO

Here is the detailed explanation about absolute and relative position

來源

2013-01-24 06:18:27 Sowmya

感謝它的工作！你能解釋一些細節嗎？我對css相當陌生，不太瞭解如何定位（相對和絕對）工作？ –

@Kintarō鑑於此鏈接。有視覺上的解釋，所以你可以很容易地理解 – Sowmya

非常感謝。看起來還有很多東西要學:) –

只需加上float：left;登錄CSS

#main_body { 
margin:0px; 
} 

#logo_area { 
background-color: #086A87; 
height: 60px; 
} 

#logo { 
padding-left:10px; 
float:left; 
width:80%; 
margin-left:auto; 
margin-right:auto; 
} 

#admin { 
bottom:0px; 
float:left; 
}

考慮正確的尺寸框和所有div裏面，你設置寬度：80％;爲標誌，那麼，剩下的20％或更少的登錄，您還需要定義這樣的：

#admin{ 
width: 20%; 
}

DEMO：http://jsfiddle.net/CrcGU/

看來我誤解：只需刪除浮動：剩下;從#logo中添加float：right;在登錄

#logo { 
padding-left:10px; 
width:80%; 
margin-left:auto; 
margin-right:auto; 
background-color:navy; 
} 

#admin { 
bottom:0px; 
float:right; 
width:15%; 
}

DEMO：http://jsfiddle.net/V6H5x/

來源

2013-01-24 06:23:28

<header> 
<div id="image">Some image here...</div> 
<div class="clear"></div> 
<div id="menu"> 
    <ul> 
     <li>Login</li> 
     <li>Sign Up</li> 
    </ul> 
</div>

#image { 
float:left;} 

.clear { 
clear:both;} 


#menu { 
float:right;} 

#menu ul li { 
display:inline; 
margin:0px 10px 0px 0px}

Demo

來源

2013-01-24 06:44:42

如何對齊的DIV

回答

相關問題