Жидкий CSS: плавающий столбец с макс. шириной и переполнением
Я использую жидкое расположение в новой теме, что я продолжаю работать для своего блога. Я часто веду блог о коде и включаю <pre> блоки в рамках сообщений. float: left столбец для предметной области имеет a max-width так, чтобы остановки столбца в определенной максимальной ширине и могли также быть уменьшены:
+----------+ +------+
| text | | text |
| | | |
| | | |
| | | |
| | | |
| | | |
+----------+ +------+
max shrunk
То, что я хочу, для <pre> элементы, чтобы быть более широкими, чем столбец текста так, чтобы я мог соответствовать 80 символам, перенесли код без горизонтальных полос прокрутки. Но я хочу <pre> элементы для переполнения от предметной области, не влияя на ее текучесть:
+----------+ +------+
| text | | text |
| | | |
+----------+--+ +------+------+
| code | | code |
+----------+--+ +------+------+
| | | |
+----------+ +------+
max shrunk
Но, 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>(doh...) - Удалите
float: left
Обходное решение, которое я в настоящее время использую, должно вставить <pre> элементы в "повреждения" в столбце сообщения, так, чтобы ширины сегментов сообщения и <pre> сегментами управляют взаимно исключительно:
+----------+ +------+
| text | | text |
+----------+ +------+
+-------------+ +-------------+
| code | | code |
+-------------+ +-------------+
+----------+ +------+
+----------+ +------+
max shrunk
Но это вынуждает меня вставить дополнительное закрытие и открытие <div> элементы в разметку сообщения, которая я сохранил бы семантически нетронутым.
По общему признанию у меня нет полного схватывания того, как модель поля работает с плаваниями с переполнением содержания, таким образом, я не понимаю почему комбинация float: left на контейнере и <pre> в нем наносят вред max-width из контейнера.
Я наблюдаю ту же проблему относительно Firefox/Chrome/Safari/Opera. IE6 (сумасшедший) кажется счастливым все время.
Это также не кажется зависящим от режима причуд/стандартов.
Обновление
Я сделал дальнейшее тестирование для наблюдения этого max-width кажется, проигнорирован, когда элемент имеет a float: left. Я поглядел на главу модели поля W3C, но не мог сразу видеть явное упоминание об этом поведении. Какие-либо указатели?
4 ответа
Установить margin-right: -240px; float: left; в элементе , чтобы он занимал как можно меньше места по горизонтали и в то же время может переполнять родительский элемент
240 пикселей . Не забудьте убедиться, что элементы очищают плавающие элементы с обеих сторон ( очищено: оба ). Полный пример ниже:
<!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>
CSS:
pre {
display: inline-block;
}
Работает для Chrome и FireFox, что заставляет меня думать, что он также будет работать, по крайней мере, в Opera, 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;
}
Относительное положение заставляет предварительный просмотр размеров столбца, не удаляя его из потока документов, а float должен регулировать ширину столбца, чтобы он содержал все его содержимое.
Я думаю, это должно сделать то, что вы ищете, но вам, возможно, придется немного подправить его, чтобы заставить работать на месте.
<!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>