J’essaie de réaliser quelque chose qui, j’en suis sûr, devrait être plus facile que je ne le fais!
J’utilise le framework réactif Skeleton, et j’ai bien fonctionné jusqu’à maintenant.
Voici un diagramme de ce que je veux réaliser.
Cela sera placé dans une colonne. Une fois que la taille de ces colonnes est réduite, j’aimerais qu’il emstack les div selon le deuxième exemple du diagramme. J’ai essayé de différentes manières, mais continue à me tromper.
Je suis plutôt nouveau en HTML / CSS, donc toute aide est appréciée! Merci beaucoup!
Vous pouvez utiliser la requête média CSS3 pour cela. Ecrivez comme ceci:
CSS
.wrapper { border : 2px solid #000; overflow:hidden; } .wrapper div { min-height: 200px; padding: 10px; } #one { background-color: gray; float:left; margin-right:20px; width:140px; border-right:2px solid #000; } #two { background-color: white; overflow:hidden; margin:10px; border:2px dashed #ccc; min-height:170px; } @media screen and (max-width: 400px) { #one { float: none; margin-right:0; width:auto; border:0; border-bottom:2px solid #000; } }
HTML
one two
Vérifiez ceci pour plus http://jsfiddle.net/cUCvY/1/
Les div flottants vous aideront à atteindre vos objectives.
Exemple
HTML
CSS
.container{ width:100%; height:200px; background-color:grey; } .content{ float:left; height:30px; } .content1{ background-color:blue; width:300px; } .content2{ width:200px; background-color:green; }
Zoomez sur la page pour voir les effets.
J’espère que cela aide.
aujourd’hui, ce genre de chose peut être fait en utilisant display:flex;
https://jsfiddle.net/suunyz3e/1435/
html:
Div One Div Two
css:
.container{ display:inline-flex; flex-wrap:wrap; border:1px solid black; } .flex-direction{ flex-direction:row; } .div1{ border-right:1px solid black; background-color:#727272; width:165px; height:132px; } .div2{ background-color:#fff; width:314px; height:132px; } span{ font-size:16px; font-weight:bold; display: block; line-height: 132px; text-align: center; } @media screen and (max-width: 500px) { .flex-direction{ flex-direction:column; } .div1{ width:202px; height:131px; border-right:none; border-bottom:1px solid black; } .div2{ width:202px; height:107px; } .div2 span{ line-height:107px; } }
Avec une mediaquery basée sur une min-width
minimale, vous pouvez obtenir quelque chose comme http://jsbin.com/aruyiq/1/edit
CSS
.wrapper { border : 2px dotted #ccc; padding: 2px; } .wrapper div { width: 100%; min-height: 200px; padding: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #one { background-color: gray; } #two { background-color: white; } @media screen and (min-width: 600px) { .wrapper { height: auto; overflow: hidden; // clearing } #one { width: 200px; float: left; } #two { margin-left: 200px; } }
Dans mon exemple, le point d’arrêt est 600px
mais vous pouvez l’adapter à vos besoins.
Fait comme ça:
HTML
CSS
.parent{ width: 400px; background: red; } .child{ float: left; width:200px; background:green; height: 100px; }
Cela fonctionne jsfiddle . Changer la width
enfant à plus de 200px
et ils vont emstackr.