CSS fluido: la columna flotante con ancho máximo y el desbordamiento
https://stackoverflow.com/questions/2642813
-
27-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
Estoy usando un diseño fluido en el nuevo tema que estoy trabajando en mi blog. A menudo escribo sobre código para incluir bloques <pre> dentro de los mensajes. La columna float: left para el área de contenido tiene una max-width manera que la columna se detiene en un determinado ancho máximo y también puede ser reducido:
+----------+ +------+
| text | | text |
| | | |
| | | |
| | | |
| | | |
| | | |
+----------+ +------+
max shrunk
Lo que yo quiero es que los elementos <pre> a ser más ancha que la columna de texto para que pueda encajar código envuelta-80-personaje sin barras de desplazamiento horizontal. Pero quiero que los elementos <pre> a desbordamiento del área de contenido, sin afectar su fluidez:
+----------+ +------+
| text | | text |
| | | |
+----------+--+ +------+------+
| code | | code |
+----------+--+ +------+------+
| | | |
+----------+ +------+
max shrunk
Pero, max-width deja de ser fluido una vez inserto el <pre> que sobresale de allí:. La anchura de los restos de columna en el max-width especificado incluso cuando reducir el tamaño del navegador más allá de ese ancho
He reproducido el problema con este escenario desnudo-mínimo:
<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>
Me di cuenta de que una de las acciones siguientes trae de vuelta la fluidez:
- Eliminar el
<pre>(DOH ...) - Eliminar el
float: left
La solución Actualmente estoy usando es insertar los elementos <pre> en "roturas" en la columna posterior, de modo que las anchuras de los segmentos de correos y los segmentos <pre> se gestionan mutuamente exclusivamente:
+----------+ +------+
| text | | text |
+----------+ +------+
+-------------+ +-------------+
| code | | code |
+-------------+ +-------------+
+----------+ +------+
+----------+ +------+
max shrunk
Pero esto me obliga a insertar elementos de cierre y apertura <div> adicionales en el puesto de marcado, que prefiero mantener semánticamente prístina.
Es cierto, yo no tienen una comprensión completa de cómo funciona el modelo de caja con los flotadores con el desbordamiento de contenido, así que no entiendo por qué la combinación de float: left en el recipiente y el interior <pre> paralizar la max-width del contenedor .
Estoy observando el mismo problema en Firefox / Chrome / Safari / Opera. IE6 (el loco) parece feliz todo el tiempo.
Esto también no parece depender de peculiaridades modo / normas.
Actualizar
he hecho más pruebas para observar que max-width parece ser ignorado cuando el elemento tiene un float: left. Miré el capítulo W3C modelo de caja, pero no pude ver de inmediato una mención explícita de este comportamiento. Cualquier punteros?
Solución
Conjunto margin-right: -240px; float: left; en el elemento <pre> para hacer que ocupe como menos espacio horizontal posible y al mismo tiempo puede desbordar el elemento <div> padre con 240px. Recuerde que debe asegurarse de que los elementos claros <p> elementos de ambos lados (clear: both) flotante. Ejemplo completo a continuación:
<!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>
Otros consejos
Creo que esto debería hacer lo que estás buscando, pero es posible que tenga que modificar un poco para conseguir que el trabajo in situ.
<!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;
}
Obras para Chrome y Firefox, que me hace pensar que funcionará en al menos Opera, Safari y IE8 también.
Si esto rompe IE6 puede utilizar este selector para ocultar la regla desde el navegador:
div > pre {
display: inline-block;
}
En el ejemplo (con caracteres extra añadido):
<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>
Este trabajo podría
pre {
position:relative;
float:left;
z-index: 1;
}
posición relativa hace que el pre "pop" de las dimensiones de la columna sin sacarlo del flujo de documentos, y el flotador debe ajustar el ancho de teh pre para contener todo su contenido.
