Fluid CSS: coluna flutuante com largura máxima e transbordamento
https://stackoverflow.com/questions/2642813
-
27-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
Estou usando um layout de fluido no novo tema em que estou trabalhando no meu blog. Costumo blogar sobre código e incluir <pre> blocos dentro das postagens. o float: left coluna para a área de conteúdo tem um max-width para que a coluna para em uma certa largura máxima e também possa ser encolhida:
+----------+ +------+
| text | | text |
| | | |
| | | |
| | | |
| | | |
| | | |
+----------+ +------+
max shrunk
O que eu quero é para o <pre> Elementos para serem mais largos que a coluna de texto para que eu possa ajustar o código embrulhado em 80 caracteres sem barras de rolagem horizontal. Mas eu quero o <pre> Elementos para transbordar da área de conteúdo, sem afetar sua fluidez:
+----------+ +------+
| text | | text |
| | | |
+----------+--+ +------+------+
| code | | code |
+----------+--+ +------+------+
| | | |
+----------+ +------+
max shrunk
Mas, max-width deixa de ser fluido quando eu insiro a pendência <pre> lá: a largura da coluna permanece no especificado max-width Mesmo quando encolhi o navegador além dessa largura.
Eu reproduzi o problema com este cenário de minimum:
<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>
Percebi que fazer qualquer um dos seguintes traz de volta a fluidez:
- Remova o
<pre>(Doh ...) - Remova o
float: left
A solução alternativa que estou usando atualmente é inserir o <pre> elementos em "intervalos" na coluna pós, de modo que as larguras dos segmentos do pós e do <pre> Os segmentos são gerenciados mutuamente exclusivamente:
+----------+ +------+
| text | | text |
+----------+ +------+
+-------------+ +-------------+
| code | | code |
+-------------+ +-------------+
+----------+ +------+
+----------+ +------+
max shrunk
Mas isso me força a inserir fechamento e abertura adicionais <div> Elementos na marcação post, que eu prefiro manter semanticamente intocados.
É certo que não tenho uma compreensão total de como o modelo de caixa funciona com carros alegóricos com conteúdo transbordante, então não entendo por que a combinação de float: left no recipiente e o <pre> dentro dele prejudica o max-width do recipiente.
Estou observando o mesmo problema no Firefox/Chrome/Safari/Opera. IE6 (o louco) parece feliz o tempo todo.
Isso também não parece dependente do modo de peculiaridades/padrões.
Atualizar
Eu fiz mais testes para observar isso max-width parece ser ignorado quando o elemento tem um float: left. Olhei para o capítulo Modelo da Caixa W3C, mas não consegui ver imediatamente uma menção explícita a esse comportamento. Algum indicador?
Solução
Definir margin-right: -240px; float: left; no <pre> elemento para torná -lo ocupar o mais espaço horizontal possível e, ao mesmo tempo, pode transbordar o pai <div> elemento com 240px. Lembre -se de garantir que o <p> Elementos limpa elementos flutuantes de ambos os lados (clear: both). Exemplo completo abaixo:
<!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>
Outras dicas
Eu acho que isso deve fazer o que você está procurando, mas pode precisar ajustá -lo um pouco para fazê -lo funcionar 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;
}
Trabalha para o Chrome e o Firefox, o que me faz pensar que funcionará na pelotão da Opera, Safari e IE8 também.
Se isso quebrar o IE6, você pode usar este seletor para ocultar a regra do navegador:
div > pre {
display: inline-block;
}
No seu exemplo (com caracteres extras adicionados):
<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>
Isso pode funcionar
pre {
position:relative;
float:left;
z-index: 1;
}
O parente da posição faz com que o pré "apareça" das dimensões da coluna sem removê -lo do fluxo do documento, e o float deve ajustar a largura do pré para conter todo o seu conteúdo.
