亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

Bagaimana untuk membuat elemen terapung disusun secara menegak dan bukannya secara mendatar dalam CSS?
P粉982054449
P粉982054449 2024-04-06 20:45:26
0
2
1286

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

P粉982054449
P粉982054449

membalas semua(2)
P粉715274052

Gunakan atribut clear: Both;.

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

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.

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan