CSS liquide: colonne flottante avec max de largeur et de trop-plein
https://stackoverflow.com/questions/2642813
-
27-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
J'utilise une mise en page fluide dans le nouveau thème que je travaille sur mon blog. Je blogue souvent sur le code et inclure des blocs <pre> dans les postes. La colonne float: left de la zone de contenu a une max-width de sorte que la colonne arrête à une certaine largeur maximale et peut également être réduit:
+----------+ +------+
| text | | text |
| | | |
| | | |
| | | |
| | | |
| | | |
+----------+ +------+
max shrunk
Ce que je veux pour les éléments <pre> plus large que la colonne de texte afin que je puisse adapter le code de 80 caractères enveloppé sans barres de défilement horizontal. Mais je veux que les éléments de <pre> à déborder de la zone de contenu, sans affecter sa fluidité:
+----------+ +------+
| text | | text |
| | | |
+----------+--+ +------+------+
| code | | code |
+----------+--+ +------+------+
| | | |
+----------+ +------+
max shrunk
Mais, max-width cesse d'être fluide une fois que je l'insert <pre> surplombant là:. La largeur de la colonne reste au max-width spécifiée même lorsque je rétrécir le navigateur au-delà d'une largeur
J'ai reproduit la question avec ce scénario nu 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>
Je remarque que l'une des manières suivantes ramène la fluidité:
- Retirez le
<pre>(DOH ...) - Supprimer le
float: left
La solution que je utilise actuellement est d'insérer les éléments de <pre> en « pauses » dans la colonne après, de sorte que les largeurs des segments de poste et les segments de <pre> sont gérées exclusivement mutuellement:
+----------+ +------+
| text | | text |
+----------+ +------+
+-------------+ +-------------+
| code | | code |
+-------------+ +-------------+
+----------+ +------+
+----------+ +------+
max shrunk
Mais ces forces me insérer des éléments <div> de fermeture et d'ouverture supplémentaires dans le balisage de poste que je préfère garder sémantiquement vierge.
Il est vrai que je n'ai pas une compréhension complète de la façon dont le modèle de boîte fonctionne avec des flotteurs avec un contenu débordant, donc je ne comprends pas pourquoi la combinaison de float: left sur le récipient et le <pre> intérieur paralysent le max-width du récipient .
j'observe le même problème sur Firefox / Chrome / Safari / Opera. IE6 (le fou) semble heureux tout le temps.
Cela ne semble pas non plus dépendant de bizarreries / mode standard.
Mise à jour
Je l'ai fait d'autres tests pour observer que max-width semble ignorés lorsque l'élément a une float: left. Je jetai un regard au chapitre de modèle de boîte W3C mais ne pouvait pas voir tout de suite d'une mention explicite de ce comportement. Tous les pointeurs?
La solution
Set margin-right: -240px; float: left; sur l'élément de <pre> pour le faire occuper moins d'espace horizontal que possible et en même temps peut déborder l'élément <div> parent avec 240px. Rappelez-vous de faire en sorte que les éléments de <p> Clairs éléments flottants des deux côtés (clear: both). Exemple complet ci-dessous:
<!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>
Autres conseils
Je pense que cela devrait faire ce que vous cherchez, mais vous pourriez avoir besoin de ruser un peu pour l'obtenir au travail 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;
}
Works pour Chrome et FireFox, ce qui me fait penser qu'il fonctionnera sur atleast Opera, Safari et IE8 aussi.
Si cette pause IE6 vous pouvez utiliser ce sélecteur pour cacher la règle à partir du navigateur:
div > pre {
display: inline-block;
}
Dans votre exemple (avec des caractères supplémentaires ajoutés):
<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>
Ce travail de puissance
pre {
position:relative;
float:left;
z-index: 1;
}
position relative rend le pré « pop out » des dimensions de la colonne sans le retirer du flux de documents, et le flotteur doit ajuster la largeur de Teh avant pour contenir tout son contenu.
