Я пытаюсь поместить два div с разными размерами шрифта. Я не могу найти способ выровнять текст на той же базовой линии. Вот что я пытался:
<div id="header">
<div id="left" style="float:left; font-size:40px;">BIG</div>
<div id="right" style="float:right;">SMALL</div>
</div>
Хорошо, во-первых, чистый способ 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 с такими вещами, как меню (в прошлый раз, когда я попробовал, у меня появилось меню под).
Кроме того, в зависимости от того, должны ли все элементы быть абсолютно позиционированы или нет, вам может понадобиться начать делать такие вещи, как явно указывать высоту содержащего элемента, что обычно нежелательно. В идеале вы хотите, чтобы контейнер был автоматически настроен для своих детей.
Проблема в том, что исходные условия шрифтов разного размера не совпадают, и я не знаю о "чистом" способе CSS для этого.
С таблицами, однако, решение тривиально:
<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.
отредактируйте, просто перечитайте вопросы и увидьте, что одно поле нужно плавать вправо... так что ниже не работает... но может быть адаптировано
Прежде всего, вы должны использовать интервалы, а не div, поскольку контент будет встроен для завершения. Я не знаю, почему и почему, но это означает, что ваши элементы будут немного дружелюбнее в браузерах.
Как только вы это сделали, это работает, даже в 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>
Вы можете сделать это, используя высоту строки, но она работает только с встроенными элементами и если текст не обернут.
<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>
Вы имеете в виду базовый уровень в типографическом смысле? (То есть каждая строка текста выравнивается с соответствующей строкой в другом столбце). Если в этом случае размер шрифта должен быть кратным друг другу - например, 12 и 18 пикселей (1:1,5).
Если вы имеете в виду, что divs должны быть одинаковой высоты, нет простого способа сделать это. Вы можете вручную установить высоту (height: 100px;) или использовать javascript для ее корректировки, как и другие изменения.
Или вы можете подделать одну и ту же высоту, заключая в нее два div в контейнере, а затем применяя стиль фона к контейнеру, который имитирует внешний вид столбцов, устанавливая его для повторения по вертикали. Таким образом, вы получаете столбцы faux. Подробную информацию см. В этой классической статье A List Apart.
Вы имели в виду, что у вас есть две части текста, и оба должны быть внизу столбцов? (извините, не удалось опубликовать изображение еще)
Один из способов, которым вы можете это сделать, - использовать метод искусственных столбцов выше.
Другой способ - настроить текст в своем контейнере внутри текста. Затем расположите оба абсолютно в нижней части столбцов... здесь длинный фрагмент:
<!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>
Если вы поместили правый плавающий div перед левым плавающим div в HTML, и они выстроятся вертикально.
В качестве альтернативы вы можете поместить оба divs влево - это совершенно правильно - и как кодируются большинство конструкций CSS.