HTML/CSS: Создание двух плавающих отделений та же высота
Как только Вы виртуализировали Windows на своем Mac, можно также попробовать установщик Mutiple IE для получения множества разновидностей Internet Explorer, не имея необходимость создавать отдельные экземпляры VM.
, Если Вы просто желаете видеть простой снимок экрана того, как страница представит в различных браузерах, можно попробовать бесплатный сервис browsershots или существует много сервисов, которые автоматически протестируют страницы в нескольких браузерах.
4 ответа
Вы можете получить столбцы с одинаковой высотой в CSS, применив нижнее заполнение большого размера, нижнее отрицательное поле такого же размера и окружив столбцы блоком div со скрытым переполнением. Вертикальное центрирование текста немного сложнее, но это должно вам помочь.
#container {overflow: hidden; ширина: 100%; } # left-col {float: left; ширина: 50%; цвет фона: оранжевый; padding-bottom: 500em; нижнее поле: -500em; } # right-col {float: left; ширина: 50%; маржа справа: -1px; / * Спасибо, IE * / border-left: 1px сплошной черный; цвет фона: красный; padding-bottom: 500em; нижнее поле: -500em; }
155
Это классическая проблема в CSS. На самом деле нет решения для этого.
Эта статья из A List Apart - хорошее чтение по этой проблеме. В нем используется метод, называемый «искусственные столбцы», основанный на наличии одного вертикально мозаичного фонового изображения на элементе , содержащем столбцы , что создает иллюзию столбцов одинаковой длины. Поскольку он находится на обертке плавающих элементов, его длина равна самому длинному элементу.
У редакторов A List Apart есть следующее примечание к статье:
Примечание редакторов: Хотя это превосходно для своего времени, это статья может не отражать современные передовые практики.
Для этой техники требуются конструкции со статической шириной, которые не работают с жидкими макетами и техниками адаптивного дизайна, которые сегодня популярны для сайтов с несколькими устройствами.
Насколько мне известно, вы не можете сделать это, используя текущие реализации CSS. Чтобы сделать две колонки одинаковой высоты, вам понадобится JS.
У меня это работает в IE 7, FF 3.5, Chrome 3b, Safari 4 (Windows).
Также работает в IE 6, если вы раскомментируете более четкий div внизу.
Редактировать : как сказала Натали Даун, вы можете просто добавить width: 100%; вместо #container .
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">
#container {
overflow: hidden;
border: 1px solid black;
background-color: red;
}
#left-col {
float: left;
width: 50%;
background-color: white;
}
#right-col {
float: left;
width: 50%;
margin-right: -1px; /* Thank you IE */
}
</style>
</head>
<body>
<div id='container'>
<div id='left-col'>
Test content<br />
longer
</div>
<div id='right-col'>
Test content
</div>
<!--div style='clear: both;'></div-->
</div>
</body>
</html>
Я не знаю способа CSS для вертикального центрирования текста в правом div, если div не фиксированной высоты. Если это так, вы можете установить line-height на то же значение, что и высота div, и поместить внутренний div, содержащий ваш текст, с помощью display: inline; высота строки: 110% .