Вопрос по css – Вертикально выровнять плавающие деления

48

Я пытаюсь переместить два div с разными размерами шрифта. Я не могу найти способ выровнять текст по той же базовой линии. Вот что я пытался:

<div id="header">
    <div id="left" style="float:left; font-size:40px;">BIG</div>
    <div id="right" style="float:right;">SMALL</div>
</div>

Ваш Ответ

5   ответов
0

я строка текста находится на одном уровне с соответствующей строкой в другом столбце). В этом случае размеры шрифта должны быть кратны друг другу - например, 12 и 18 пикселей (1: 1,5).

Если вы имеете в виду, что элементы div должны быть одинаковой высоты, то сделать это нелегко. Вы можете вручную установить высоту (height: 100px;) или использовать javascript, чтобы настроить одно, как другие изменения.

Или же вы можете подделать одну и ту же высоту, заключив два контейнера в контейнер, а затем применив к контейнеру фоновый стиль, который имитирует внешний вид столбцов, настроив его на повторение по вертикали. Таким образом, вы получите ложные столбцы. Для более глубокого взгляда, посмотрите этоклассический A List Apart статья.

Вы имели в виду, что у вас есть два фрагмента текста, и оба должны быть внизу столбцов? (извините, пока не можете опубликовать изображение)

Один из способов сделать это - использовать метод Faux Columns выше.

Другой способ - установить текст в своем собственном контейнере внутри текста. Затем поместите оба абсолютно в нижней части столбцов ... вот длинный фрагмент:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <style type="text/css" media="screen">

        .col { width:200px; float:left;  }
        .short { height:200px; background:#eee; margin-bottom:20px; }
        .long { background:#ddd; margin-bottom:100px; /* margin equal to height of #big */  }

        #container { overflow:hidden; width:400px; margin:0px auto; position:relative; border:1px solid green;}


        #big, #small { position:absolute; bottom:0px; width:200px; }
        #big { height:100px; background:red; }
        #small { height:20px; background:green; right:0px; }



        </style>
    </head>
    <body>

    <div id="container">
        <div class="col long">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>

        <div class="col short">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
        </div>

        <div id="big" >BIG</div>

        <div id="small">small</div>

    </div>
    </body>
</html>
Некоторый серьезный некромантия с этим комментарием, но я думаю, что он имел в виду, что они должны иметь общий фактор, который в этом случае будет 6.
Я понятия не имею, что вы хотели сказать, но 18 не является целым числом, кратным 12, и, наоборот,anything является нецелым кратным 12.
9

просто перечитайте вопросы и увидите, что одна коробка должна быть смещена вправо ... поэтому приведенная ниже не работает ... но может быть адаптирована

Прежде всего, вы должны использовать интервалы, а не дивы, так как контент будет закончен до конца. Я не знаю, почему, но это означает, что ваши элементы будут вести себя немного дружелюбнее во всех браузерах.

Как только вы это сделаете, это сработает, даже в ie6 и 7:

#header {height:40px;line-height:40px;}
#left, #right {display:-moz-inline-stack;display:inline-block;vertical-align:baseline;width:auto;} /*double display property is fora  fix for ffx2 */
#left {font-size:30px;}
#right{font-size:20px;}

<div id="header">
  <span id="left">BIG</span>
  <span id="right">SMALL</span>
</div>
+1, спасибо - просто изменил мои плавающие параграфы на встроенные блоки блоков, и это действительно работает!
-2

L, и они выстроятся вертикально.

В качестве альтернативы, вы можете перемещать оба элемента влево - это совершенно правильно - и то, как кодируется большинство конструкций CSS.

Я тоже так думал!
Это не помогает им совпадать на базовом уровне, что является вопросом (я сделал ту же ошибку, пока перечитал).
1

используя высоту строки, но это работает только для встроенных элементов и, если текст не переносится.

<div id="header" style="overflow:hidden;">
    <span id="left" style="font-size:40px;">BIG</span>
    <span id="right" style="line-height:48px;">SMALL</span>
</div>

Я изменилdiv вspan, Если вы хотите сохранитьdiv просто добавьdisplay:inline в твоем стиле.

<div id="header" style="overflow:hidden;">
    <div id="left" style="font-size:40px;display:inline;">BIG</div>
    <div id="right" style="line-height:48px;display:inline;">SMALL</div>
</div>
42

во-первых, чистый способ CSS. Вы можете получить вертикальное выравнивание по дну, используяотносительное + абсолютное позиционирование как это:

<div id="header">
  <div id="left">BIG</div>
  <div id="right">SMALL</div>
</div>
<style type="text/css">
html, body { margin: 0; padding: 0; }
#header { position: relative; height: 60px; }
#left { font-size: 40px; position: absolute; left: 0; bottom: 0; }
#right { position: absolute; right: 0; bottom: 0; }
</style>

У вас могут быть некоторые проблемы с этим, такие как поведение IE6, а также проблемы z-index с такими вещами, как меню (в прошлый раз, когда я пробовал это, мои меню появлялисьunder абсолютное содержание).

Кроме того, в зависимости от того, должны ли все элементы быть абсолютно позиционированы или нет, вам может потребоваться начать делать такие вещи, как явное указание высоты содержащего элемента, что обычно нежелательно. В идеале вы хотите, чтобы контейнер автоматически определял размер для своих дочерних элементов.

Проблема заключается в том, что базовые линии шрифтов разных размеров не будут совпадать, и я не знаю, что такое «чистый». CSS способ сделать это.

С таблицами, однако, решениеtrivial:

<table id="header">
<tr>
  <td id="left">BIG</td>
  <td id="right">SMALL</td>
</tr>
</table>
<style type="text/css">
#header { width: 100%; }
#header td { vertical-align: baseline; }
#left { font-size: 40px; }
#right { text-align: right; }
</style>

Попробуйте, и вы увидите, что это работает отлично.

Толпа противников столов будет кричать «синее убийство», но вышеизложенное - самый простой и наиболее совместимый с браузером способ (особенно если требуется поддержка IE6) сделать это.

Да, и всегда предпочитайте использовать классы для вставки стилей CSS.

В основном то же самое. Я предпочитаю определять высоту на контейнере, чем прибегать к таблицам, но я в основном занимаюсь разработкой веб-приложений, где весь вонючий макет уже абсолютно позиционирован. Я не ожидал бы, что IE6 будет бороться с этим, если не будет куча других дерьмов, продолжающихся :)
Если вы хотите привести текст в соответствие с базовой линией, я не вижу, как еще вы можете это сделать, кроме как использовать таблицы. Вещи внутри div в принципе слишком независимы друг от друга, и промежутки не могут быть выровнены так или иначе. Использование таблиц, когда таблицы неправильные, неправильное, использование таблиц, когда они правильные. Однако использование их, когда они работают единственно, вполне приемлемо в моей книге.
Я бы предпочел & quot; вертикальное выравнивание: дно & quot;

Похожие вопросы