Bagaimana untuk membuat elemen terapung disusun secara menegak dan bukannya secara mendatar dalam CSS?

Question

Saya cuba membuat halaman web dengan dua lajur, satu bahagian dengan kandungan utama dan satu lagi dengan kandungan tambahan. Tetapi kerana saya menggunakan sifat apungan untuk menjajarkan lajur tambahan ke kiri, ia disusun secara mendatar, tetapi saya mahu ia disusun secara menegak.

Kod semasa saya:

.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>

Saya cuba menggunakan sifat Vertical-align tetapi ia tidak berjaya. Apa yang saya nak jadi

Answer 1

Gunakan atribut clear: Both;.

.column.side{
    clear:both;
}

Answer 2

Dengan menggunakan column 可以垂直堆叠列。通过使用 row lajur adalah sebelah menyebelah.

.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.