Deux Divs côte à côte, qui s’emstacknt ensuite avec un changement réactif

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.

Diagramme montrant ce que je divise

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.