国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Comment empiler les éléments flottants verticalement plut?t qu'horizontalement en CSS??
P粉982054449
P粉982054449 2024-04-06 20:45:26
0
2
1292

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

P粉982054449
P粉982054449

répondre à tous(2)
P粉715274052

Utilisez l'attribut clear: Both;.

.column.side{
    clear:both;
}
P粉792673958

En utilisant column 可以垂直堆疊列。通過(guò)使用 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.

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal