Жидкие CSS: плавающая колонна с максимальной шириной и переполнением
https://stackoverflow.com/questions/2642813
-
27-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
Я использую макет жидкости в новой теме, над которым я работаю для моего блога. Я часто блог о коде и включить <pre> Блоки внутри постов. То float: left столбец для области содержимого имеет max-width Так что столбец останавливается на определенной максимальной ширине, а также может быть сокращен:
+ ----------- + + ------ + | текст |. |. текст |. |. |. |. |. |. |. |. |. |. |. |. |. |. |. |. |. |. |. |. |. + ------------ + + ------ + Максимальный сжатый
Что я хочу, для <pre> Элементы, чтобы быть шире, чем текстовый столбец, чтобы я мог соответствовать 80-символьному коду без горизонтальных полос прокрутки. Но я хочу <pre> Элементы для переполнения из области содержания, не влияя на его текучесть:
+ ----------- + + ------ + | текст |. |. текст |. |. |. |. |. + ----------- + - + + ------ + ------ + | код |. |. код |. + ----------- + - + + ------ + ------ + | |. |. |. + ------------ + + ------ + Максимальный сжатый
Но, max-width останавливает жидкость, как только я вставляю навис <pre> там: ширина столбца остается в указанном max-width Даже когда я сжимаю браузер за пределами этой ширины.
Я воспроизвел вопрос с этим минимальным сценарием:
<div style="float: left; max-width: 460px; border: 1px solid red">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
<pre style="max-width: 700px; border: 1px solid blue">
function foo() {
// Lorem ipsum dolor sit amet, consectetur adipisicing elit
}
</pre>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</div>
Я заметил, что делать либо из следующего, возвращает текучесть:
- Удалить
<pre>(до ...) - Удалить
float: left
Обходной путь, который я в настоящее время использую, это вставить <pre> элементы в «разрывы» в столбце посту, так что ширина после сегментов и <pre> Сегменты управляются взаимно исключительно:
+ ----------- + + ------ + | текст |. |. текст |. + ----------- + + ------- + + -------------- + + --------------- + |. код |. |. код |. + -------------- + + -------------- + + ---------- + + -------- + + ------------ + + ------ + Максимальный сжатый
Но это заставляет меня вставлять дополнительное закрытие и открытие <div> Элементы в почтовую разметку, которые я бы предпочел держать семантически нетронутыми.
По общему признанию, у меня нет полного понимания, как модель коробки работает с поплавками с переполненным содержанием, поэтому я не понимаю, почему комбинация float: left на контейнере и <pre> Внутри это калело max-width контейнера.
Я наблюдаю за такой же проблемой на Firefox / Chrome / Safari / Opera. IE6 (сумасшедший) кажется счастливым все время.
Это также не кажется зависимым от режима quirks / стандартов.
Обновлять
Я сделал дальнейшее тестирование, чтобы наблюдать, что max-width кажется, игнорируется, когда элемент имеет float: left. Отказ Я посмотрел на главу модель W3C Box, но не смог сразу увидеть явную упоминание об этом поведении. Любые указатели?
Решение
Задавать margin-right: -240px; float: left; на <pre> элемент, чтобы заставить его заниматься как можно меньше горизонтального пространства, а в то же время может переполнить родитель <div> элемент с 240px. Отказ Не забудьте убедиться, что <p> Элементы очищают плавающие элементы с обеих сторон (clear: both). Полный пример ниже:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Solution</title>
</head>
<body>
<div style="float: left; background-color: cyan; max-width: 460px;">
<p style="background-color: magenta; clear: both;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<pre style="float: left; max-width: 700px;
background-color: yellow; margin-right: -240px;">
function foo() {
// Lorem ipsum dolor sit amet, consectetur adipisicing elit
}
</pre>
<p style="background-color: magenta; clear: both;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</div>
</body>
</html>
Другие советы
Я думаю, что это должно делать то, что вы ищете, но вам может потребоваться немного настроить его, чтобы заставить его работать на месте.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css" media="screen">
body
{
margin: 0;
padding: 0;
}
#wrapper
{
float: left;
width: 100%;
}
#content
{
float: left;
width: 100%;
max-width: 500px;
margin: 0;
padding: 0;
font-family: "Trebuchet MS", sans-serif;
font-size: 12px;
}
#content-pad
{
margin: 50px;
padding: 50px 0 40px 50px;
background-color: #CCC;
}
p, pre
{
margin: 0 50px 10px 0;
line-height: 1.6em;
}
pre
{
padding: 20px;
width: 560px;
background-color: #333;
color: #FFF;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="content">
<div id="content-pad">
<p>Fusce euismod nunc vitae orci vestibulum adipiscing. Nam id quam libero, sed convallis elit. Etiam interdum, urna et imperdiet euismod, nisi erat commodo elit, sed convallis magna est quis sem. Fusce tempor aliquet est, et ornare eros vulputate et. Vivamus arcu augue, pretium vel fermentum in, gravida sed elit. Vestibulum ut ligula ac quam hendrerit ullamcorper. Phasellus id justo augue. Integer a eros ante. Vivamus sapien mi, placerat a viverra pharetra, dignissim sit amet ipsum. Fusce nunc nunc, tempus ut aliquet sit amet, consectetur sed quam. Cras ligula enim, bibendum eget luctus a, convallis sit amet nisl. Nullam in quam in lectus faucibus lobortis vel pulvinar ante.</p>
<pre>Here is some code!
We're going to make sure that it has a full eighty characters to play in.
12345678901234567890123456789012345678901234567890123456789012345678901234567890</pre>
<p>Nullam in sapien vitae dui tincidunt elementum. Curabitur condimentum vulputate sem ornare pharetra. Fusce in dolor eget neque viverra sagittis a a orci. Vivamus blandit leo eget orci viverra quis hendrerit velit tempus. Donec in erat risus. Nullam scelerisque faucibus ante, ultricies tristique dolor laoreet sit amet. Duis sit amet tortor dolor, vel interdum ipsum. Sed sed nibh vel ipsum commodo cursus. Proin fermentum nunc in velit tincidunt imperdiet sit amet nec neque. Suspendisse neque ante, luctus sit amet pulvinar eu, congue laoreet magna. Aenean sit amet porttitor quam. Mauris hendrerit vulputate tempus. Curabitur mauris magna, laoreet congue rutrum condimentum, condimentum in sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</div>
</div>
<!-- this next element just maintains the margin properly -->
<div style="clear:both; height: 0; overflow: hidden;"></div>
</body>
</html>
CSS:
pre {
display: inline-block;
}
Работает для Chrome и Firefox, что заставляет меня думать, что он будет работать по крайней мере на опере, Safari и IE8.
Если это разрывы IE6, вы можете использовать этот селектор, чтобы скрыть правило из браузера:
div > pre {
display: inline-block;
}
В вашем примере (с добавленными дополнительными персонажами):
<div style="float: left; max-width: 460px; border: 1px solid red">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
<pre style="max-width: 700px; border: 1px solid blue; display: inline-block;">
function foo() {
// Lorem ipsum dolor sit amet, consectetur adipisicing elit dfsf sdf sdf sdf sdf
}
</pre>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</div>
Это может работать
pre {
position:relative;
float:left;
z-index: 1;
}
Положение относительной позиции делает предварительную «выпустить» размеров колонны, не удаляя его из потока документа, и поплавок должен настроить ширину Pere, чтобы содержать все его содержание.
