нижний выравнивание div рядом с плавающими div - PullRequest
Новая
       32

нижний выравнивание div рядом с плавающими div

0 голосов
/ 13 июля 2011 
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;
}

1 Ответ

0 голосов
/ 16 мая 2012

В вашем случае, я думаю, вертикальное выравнивание не поможет вам. Скорее вам нужно выровнять ваш HTML более семантически, чтобы вы могли использовать Position: относительный, верхний и левый или Margin-top / Margin справа, чтобы выровнять его.

После псевдокода. Шаги могут быть полезны для его выравнивания.

Шаг 1: попробуйте определить логотип в контейнере или оставить его в покое слева

Шаг 2: Попытка определить раздел, состоящий из трех разных верхний текст разделов, заголовок и меню и плавающий внешний родительский раздел как хорошо осталось.

Шаг 3: попробуйте определить правильный раздел и всплыть правильно

Шаг 4: Расположите все элементы, используя Позицию: относительный, верхний и левый или Margin-top / Margin right

Вышеприведенные шаги помогут вам получить идеальный макет изображения, а не использовать Vertical-align.

Если вам нужна дополнительная помощь по выравниванию по вертикали здесь

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

Надеюсь, этот ответ поможет.

Удачи .. счастливого кодирования.

...