下位揃えdivを浮動小数点数の横に並べ替え

Question

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; 
} 

Answer 1

あなたのケースでは、垂直整列が役に立たないと思います。むしろ、Position：relative、top and leftまたはMargin-top/Marginを右揃えに使用できるように、HTMLをより意味的に整列させる必要があります。

次の擬似コードは、それを整列させるのに便利です。

ステップ1：三つの異なる セクションのトップテキスト、タイトルやメニューを備えたセクションを定義して、外側の親セクションをフロートしよう：コンテナ内のロゴを定義してみたり単独で浮い

ステップ2を残しました が残っています。

ステップ3：右のセクションを定義してみて、それを浮遊右

ステップ4：相対、上部及び 左または右上記

マージントップ/マージン：位置を用いて、すべての要素を配置ステップは、垂直方向の整列ではじめるのではなく、完璧なレイアウトの写真を手に入れるのに役立ちます。

あなたはこの答えは助けここに垂直揃え

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

希望にさらにヘルプが必要な場合。

幸運なコーディング。