Как сделать плавающий правый элемент вертикально выровненным по низу его родительского элемента div? - PullRequest
Новая
       10

Как сделать плавающий правый элемент вертикально выровненным по низу его родительского элемента div?

0 голосов
/ 18 сентября 2009

Другими словами, в HTML-коде внизу справа есть «маленькие слова», и я хочу, чтобы он был в правом нижнем углу. 

<html>
  <body>
    <div style="width: 500px; background-color: #cdcdcd">
      <div style="font-size: x-small; float: right">little words</div>
      <div style="font-size: x-large">BIG WORDS</div>
    </div>
  </body>
</html>

Ответы [ 3 ]

1 голос
/ 21 сентября 2009

Использовать высоту строки. Установите для двойного значения «БОЛЬШИЕ СЛОВА», вы также можете установить на полях или отступах «маленькие слова»

результат:

альтернативный текст http://img84.imageshack.us/img84/1293/pantallazoi.png

<html>
  <body>
    <div style="width: 500px; background-color: #cdcdcd">
      <div style="font-size: x-small; float: right; line-height:400%;">little words</div>
      <div style="font-size: x-large">BIG WORDS</div>
    </div>
  </body>
</html>
1 голос
/ 18 сентября 2009

Не знаю, можете ли вы сделать это надежно (большинство браузеров ...), используя правильный float.

Вы можете попробовать это с абсолютным позиционированием: 

<html>
  <body>
    <div style="width: 500px; background-color: #cdcdcd; position: relative;">
      <div style="font-size: x-small; postition: absolute; bottom: 0; right: 0">little words</div>
      <div style="font-size: x-large">BIG WORDS</div>
    </div>
  </body>
</html>
0 голосов
/ 18 сентября 2009

Если вы хотите float, измените порядок всех div и примените класс clearfix к содержащему div. 

  <html>
    <body>     
      <style type="text/css">
        .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
        .clearfix { display: inline-block; }
        /* Opera hack */
        * html .clearfix { height:1%; }
        .clearfix { display:block; }
      </style>
      <div style="width: 500px; background-color: #cdcdcd" class="clearfix">
        <div style="font-size: x-large">BIG WORDS</div>
        <div style="font-size: x-small; float: right">little words</div>
      </div>
    </body>
  </html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...