Essayez quelque chose comme ça. Utilisez 4 div code> les blocs et donnez-leur une couleur alorme. Le dernier est le blanc et vous lui donnez une position absolue code>. Ajouter marge code> et hauteur code> à tous les div code> et que vous créez votre image.

L'exemple: p>

P>

<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
<div class="center"></div>

Le moyen le plus simple d'organiser des sections avec une réactivité sans la nécessité d'utiliser les requêtes de support utilise la grille CSS. C'est un outil incroyable et vous utilisez beaucoup moins de code à cela. Je vous recommande de lire ceci: https://css-tricks.com/ Snippets / CSS / Complete-Guide-Grid-Grid / et familiariser avec la grille CSS. Cela résoudra plus que vos problèmes. Vous pouvez voir ci-dessous comment j'ai résolu votre problème avec beaucoup moins de code que d'habitude. J'espère que cela répond à votre question. N'oubliez pas de mettre un drapeau si vous avez aimé ma solution! Passez une bonne journée de code :)

p>

<section class="container">
  <div class="div1"></div>
  <div class="div2"></div>
  <div class="div3"></div>
  <div class="div4"></div>
</section>

Après un peu d'effort, j'ai proposé Ceci

Permet de creuser dans un peu h2>

le HTML est assez simple p> xxx pré>

nous avons un conteneur de niveau supérieur #app code>, Un conteneur pour nos couches div.flex code> et div.top code>, l'élément que nous positionnons au sommet. p>

Le CSS démarre avec certains chaudières, juste pour que les choses démarrent p> xxx

Le HTML, Body Code> Il suffit de faire le bien de la démonstration à Jsfiddle. Sinon, il serait compensé. Gross. P>

Nous définissons ensuite .flex code> de sorte que chacun des éléments de ce soit remplissant le conteneur, c'est-à-dire flexible à travers toutes les colonnes code> gauche à droite p> Enfin, nous donnons à chaque élément .row code> une couleur p>

avec cela, nous nous retrouvons avec 3 bande de couleur de la taille égale toutes espacées de manière égale dans le DIV P>

La partie intéressante h2> xxx pré>

ici, je dois admettre que ma compréhension est un peu fragile, si je me trompe s'il te plaît, corrigez-moi. P>

Que Nous voulons maintenant, c'est pour #top code> pour casser le flux normal de la mise en page. Nous ne voulons pas qu'il soit simplement placé sous la précédente Div. Pour ce faire, nous pouvons dire Position: absolu code>, cependant que sur son propre n'est pas suffisant. P>

Position: absolu code> recherche l'ancêtre le plus proche avec Position: relatif code> et s'aligne sur cet ancêtre. Donc, si nous voulons positionner #top code> relatif à son conteneur #app code> p> xxx pré>

haut: 0 Alignit #top code> en haut de #app code>. Jouez autour de lui dans le violon pour obtenir une compréhension solide. P>

enfin h2> xxx pré>

Nous voulons une petite marge autour du bord de #top code> Nous pouvons voir les couleurs de derrière, et nous avons couvert avec marge: 20px code>. Maintenant, nous devons soustraire 2 * margin code> à partir de la largeur code> et hauteur code> pour la ligne correctement p> xxx pré >

J'espère que cela vous aide! P>

AIND H1>

PS Jouez avec les chiffres dans le violon. Qui devrait aider beaucoup p>

p>

<div id="app">
  <div class="flex">
    <div class="row" id="item1"></div>
    <div class="row" id="item2"></div>
    <div class="row" id="item3"></div>
  </div>
  <div id="top"></div>
</div>

J'ai fait quelque chose comme ça, espérons que cela aide.

p>

<div>
  <div class="DivRow">
    <div id="row1"></div>
    <div id="row2"></div>
    <div id="row3"></div>
  </div>
  <div class="DivColumn"></div>
</div>