J'utilise une disposition de fluide dans le nouveau thème que je travaille sur mon blog. Je blogue souvent sur le code et incluez les blocs float: la colonne code> gauche de la zone de contenu a un max-largeur code> de sorte que la colonne s'arrête à une certaine largeur maximale et peut également être réduite:
+----------+ +------+
| text | | text |
+----------+ +------+
+-------------+ +-------------+
| code | | code |
+-------------+ +-------------+
+----------+ +------+
+----------+ +------+
max shrunk
4 Réponses :
CSS:
<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>
Pas de chance :( Le contenu ne diminue pas. Essayez de rétrécir la largeur du navigateur à quelque chose comme 250px et vous observerez que les passages de texte ne s'enveloppent pas à 250px.
Je ne pense pas que vous puissiez y parvenir sans l'utilisation de JavaScript - en raison de la déclaration max-largeur. Pseudo: sur la charge et lorsque la fenêtre est redimensionnée {si la largeur de la fenêtre est inférieure à max-largeur {Set Max-largeur sur la largeur de la fenêtre}}. Et en plus, très peu de personnes ont des écrans qui sont étroits.
Les utilisateurs de smartphones ont généralement des écrans très étroits :) Je suis particulièrement intéressé à découvrir pourquoi max-largeur et float: gauche Ne pas bien sortir ensemble. Vous verrez que lorsque le float: gauche est sorti, le rétrécissement commence à fonctionner bien ...
MAX-WIDTH fonctionne de manière différente des éléments de niveau flotté et de blocage car les éléments flottés tentent de prendre le plus petit espace horizontal possible, tandis que les éléments de niveau de bloc tentent de prendre autant d'espace horizontal possible.
Ceci pourrait fonctionner
pre {
position:relative;
float:left;
z-index: 1;
}
Le problème est avec les éléments pas obéissant max-largeur lorsque j'ai en ligne
Définir efface les éléments flottants des deux côtés (
Merci Monsieur. Je suis juste devenu légèrement plus éclairé!
La marge droite négative est vraiment une nécessité pour la combinaison de marge-droit: -240px; flotteur: gauche; sur l'élément Element avec
240px . N'oubliez pas de vous assurer que les éléments effacer: ). Exemple complet ci-dessous:
2 commentaires
max-largeur et pré . Merci beaucoup!
Je pense que cela devrait faire ce que vous cherchez, mais vous devrez peut-être légèrement modifier pour le faire fonctionner 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>
@ICIO: Merci pour l'effort! Bien que votre solution semble réaliser ce que je demandais, la réponse de Knut résout mon problème en addition de deux règles additionnelles CSS.
@Ates Goral: Mon plaisir. Pourrais-je ajouter que l'élément Content-Content-Pad n'est pas nécessaire pour le PRE à respecter, c'est purement là pour des raisons esthétiques.
Je vous recommande d'utiliser jsbin.com pour démontrer votre problème. Et aussi, pour tester les solutions proposées.