搜尋

首頁  >  問答  >  主體

如何在 CSS 中使浮動元素垂直堆疊而不是水平堆疊?

我正在嘗試製作一個包含兩列的網頁,一側具有主要內容,另一側具有額外的內容。但是因為我使用浮動屬性將額外的列向左對齊,所以它水平堆疊,但我希望它垂直堆疊。

我目前的程式碼:

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

我嘗試過使用 Vertical-align 屬性,但它沒有任何作用。 我想要發生什麼

P粉982054449P粉982054449263 天前798

全部回覆(2)我來回復

  • P粉715274052

    P粉7152740522024-04-07 18:01:30

    使用 clear: Both; 屬性。

    .column.side{
        clear:both;
    }
    

    回覆
    0
  • P粉792673958

    P粉7926739582024-04-07 15:57:12

    透過使用 column 可以垂直堆疊列。透過使用 row 各列是並排的。

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

    回覆
    0
  • 取消回覆