底部对齐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旁边

回答

相关问题