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

在你的情况下，我猜垂直对齐不会帮助你。相反，你需要更加语义地对齐你的HTML，这样你就可以使用Position：relative，top和left或Margin-top / Margin来对齐它。

遵循伪代码步骤可能对您有用。

步骤1：尝试在容器中定义徽标或单独浮动

步骤2：尝试定义包含三个不同的部分   部分顶部文本，标题和菜单，并将外部父部分浮动为   好了。

第3步：尝试定义一个正确的部分并将其向右浮动

Step4：使用Position：relative，top和left定位所有元素   或保证金最高/保证金权利

以上步骤将帮助您获得完美的布局，而不是摆弄垂直对齐。

如果您需要有关vertical-align的更多帮助

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

希望这个答案有所帮助。

祝你好运..快乐的编码。

底部对齐浮动div旁边的div

1 个答案: