底部對齊div浮動div旁邊

I am trying to get the following effect using css. I am trying to get bottom edges of title and 'right text' to align with logo's bottom edge, and get the title to stretch 
vertically. I have included html and css 

____________________________________________________________________________________________ 
      |________________________________________________________TOP_TEXT_________________ 
      |                 | 
    LOGO |        title         | right text 
      |____________________________________________________________________| 
__________|______Menu__________________________________________________________|____________ 


<div id="wrapper"> 

    <div id="logo"><img src="some.gif" width="193" height="77" /> </div> 
    <div id="top_text">top text</div> 

    <div id="right_text"> right text </div> 

    <div id="middle"> 

    <div id="title">title</div> 
    <div id="menu">menu</div> 

    </div> <!-- middle --> 

</div> <!-- wrapper --> 



#wrapper { 
width: 100%; 
} 

#logo { 
    float: left; 
    border-right:#FFFFFF thin solid; 
} 

#top_text { 

    text-align: right; 
    width: auto; 
} 


#right_text { 
    float: right; 
    border-left:#FFFFFF thin solid; 
} 


#middle{ 
/* may be needs some sort of height */ 
} 

#title { 
/* not sure how to put here */ 
} 
#menu { 
/* doesn't line up with bottom edge of logo and 'right' */ 
    vertical-align:bottom; 
}

來源

2011-07-13 alex

在你的情況下，我猜垂直對齊不會幫助你。相反，您需要更加語義化地對齊HTML，以便您可以使用Position：relative，top和left或Margin-top/Margin右對齊來對齊它。

以下僞代碼步驟對您來說可能很有用。

步驟1：嘗試在容器中定義的標誌或單獨浮動它留下

步驟2：試圖定義包括三個不同區段頂部的文本，標題和菜單和浮子外父節爲節好了。

步驟3：嘗試限定右部和浮它右

步驟4：相對的，頂部和左側或邊距/保證金右

上面：所有使用位置的元素放置步驟將幫助您獲得圖片完美的佈局，而不是垂直對齊。

如果您需要進一步的幫助，這裏垂直對齊

http://www.w3schools.com/cssref/pr_pos_vertical-align.asp

希望這個答案幫助。

祝你好運..快樂的編碼。

來源

2012-05-15 21:12:34 Ravi

底部對齊div浮動div旁邊

回答

相關問題