Fluido CSS: colonna mobile con max-width e troppopieno
https://stackoverflow.com/questions/2642813
-
27-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
Io sto usando un layout fluido nel nuovo tema che sto lavorando su per il mio blog. Mi capita spesso di Blog su codice e includere blocchi <pre> all'interno dei messaggi. La colonna float: left per l'area del contenuto ha un max-width modo che la colonna si ferma in una certa larghezza massima e può anche essere ridotto:
+----------+ +------+
| text | | text |
| | | |
| | | |
| | | |
| | | |
| | | |
+----------+ +------+
max shrunk
Quello che voglio è per gli elementi <pre> di essere più largo della colonna di testo in modo che possa andare bene il codice di 80 caratteri avvolto senza barre di scorrimento orizzontale. Ma voglio che gli elementi <pre> traboccare dalla zona dei contenuti, senza compromettere la sua fluidità:
+----------+ +------+
| text | | text |
| | | |
+----------+--+ +------+------+
| code | | code |
+----------+--+ +------+------+
| | | |
+----------+ +------+
max shrunk
Ma, max-width smette di essere fluido, una volta che l'inserto <pre> sovrastante in là:. La larghezza dei resti colonna al max-width specificata anche quando termoretraibile browser oltre che di larghezza
Ho riprodotto il problema con questo scenario nudo minimo:
<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>
Ho notato che facendo una delle seguenti riporta la fluidità:
- Rimuovere il
<pre>(doh ...) - Rimuovere il
float: left
La soluzione Sono attualmente in uso è quello di inserire gli elementi <pre> in "interruzioni" nella colonna montante, in modo che le larghezze dei segmenti postali ei segmenti <pre> vengono gestite mutuamente esclusiva:
+----------+ +------+
| text | | text |
+----------+ +------+
+-------------+ +-------------+
| code | | code |
+-------------+ +-------------+
+----------+ +------+
+----------+ +------+
max shrunk
Ma questo mi costringe ad inserire ulteriori elementi di chiusura e apertura <div> coglie il palo markup che Preferisco tenere semanticamente incontaminata.
Certo, non ho una comprensione completa di come il box model lavora con carri con traboccante di contenuti, quindi non capisco il motivo per cui la combinazione di float: left sul contenitore e la <pre> suo interno paralizzare l'max-width del contenitore .
Sto osservando lo stesso problema su Firefox / Chrome / Safari / Opera. IE6 (il pazzo) sembra felice tutto il tempo.
Anche questo non sembra dipende quirks mode / standard.
Aggiorna
Ho fatto ulteriori test osservare che max-width sembra avere ignorato quando l'elemento ha un float: left. Diedi un'occhiata al capitolo W3C scatola modello, ma non riuscivo a vedere subito una menzione esplicita di questo comportamento. Tutti gli indicatori?
Soluzione
Imposta margin-right: -240px; float: left; sull'elemento <pre> per renderlo occupare il meno spazio orizzontale possibile e allo stesso tempo può traboccare l'elemento genitore <div> con 240px. Ricordarsi di assicurarsi che gli elementi <p> cancella elementi su entrambi i lati (clear: both) galleggiante. Esempio completo di seguito:
<!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>
Altri suggerimenti
Credo che questo dovrebbe fare quello che stai cercando, ma potrebbe essere necessario modificarlo leggermente per farlo funzionare 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;
}
Opere per Chrome e Firefox, che mi fa pensare che funzionerà su atleast Opera, Safari e IE8 anche.
Se questo rompe IE6 è possibile utilizzare questo selettore per nascondere la regola dal browser:
div > pre {
display: inline-block;
}
Nel tuo esempio (con caratteri supplementari aggiunti):
<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>
Questo lavoro potrebbe
pre {
position:relative;
float:left;
z-index: 1;
}
posizione relativa rende pre "pop out" delle dimensioni della colonna senza rimuoverlo dal flusso di documenti, e galleggiante deve regolare la larghezza di pre teh per contenere tutto il suo contenuto.
