Comment empiler les éléments flottants verticalement plutôt qu'horizontalement en CSS ?

Question

J'essaie de créer une page Web avec deux colonnes, un côté avec le contenu principal et l'autre avec du contenu supplémentaire. Mais comme j'utilise la propriété float pour aligner la colonne supplémentaire vers la gauche, elle s'empile horizontalement, mais je souhaite qu'elle s'empile verticalement.

Mon code actuel :

.topicheader {
    padding: 2% 2%;
    float: left display: block;
    background-image: linear-gradient(to top, rgb(40, 40, 40), rgb(50, 50, 50));
    font-size: 125%;
    border-radius: 3px;
    box-shadow: 0px 0px 15px 0px black;
  }

 .column.side {
    z-index: 1;
    width: 25%;
    float: right;
  }

<div>
    <div class="def column side " ;>
      <strong class="topicheader">About</strong>
      <p style="color:white;">
       
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in euismod est. Curabitur euismod ultrices pellentesque. Morbi condimentum venenatis nibh sed feugiat.
      </p>
    </div>

     <div class="def column side " ;>
      <strong class="topicheader">About</strong>
      <p style="color:white;">
       
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in euismod est. Curabitur euismod ultrices pellentesque. Morbi condimentum venenatis nibh sed feugiat.
      </p>
    </div>
  </div>

J'ai essayé d'utiliser la propriété Vertical-align mais cela n'a rien fait. Qu'est-ce que je veux qu'il se passe

Answer 1

Utilisez l'attribut clear: Both;.

.column.side{
    clear:both;
}

Answer 2

En utilisant column 可以垂直堆叠列。通过使用 row les colonnes sont côte à côte.

.container {
    display: flex;
    flex-direction: column; /* stack vertically */
}
.column {
    height: 50vh; /* half of view height */
}

/* for example some colors */
.column:first-child {
    background-color: orange;
    color: blue;
}
.column:last-child {
    background-color: blue;
    color: orange;
}

    

        About
        

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in euismod est. Curabitur euismod ultrices pellentesque. Morbi condimentum venenatis nibh sed feugiat.
        
    
    

        About
        

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in euismod est. Curabitur euismod ultrices pellentesque. Morbi condimentum venenatis nibh sed feugiat.