如何在CSS中使浮动元素垂直堆叠而不是水平堆叠？

5sxhfpxr 于 2022-12-30 发布在其他

关注(0)|答案(2)|浏览(131)

我想做一个两栏的网页，一边是主要内容，另一边是额外的内容，但是因为我使用了float属性来将额外的一栏向左对齐，所以它是水平堆叠的，而我想让它垂直堆叠。
我的当前代码：

.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属性，但它没有任何作用。What I want to happen

css

来源：https://stackoverflow.com/questions/74953058/how-do-i-make-floated-elements-stack-vertically-instead-of-horizontally-in-css

2条答案

按热度按时间

ubby3x7f1#

使用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;
}

<div class="container">
    <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>

赞(0）回复(0）举报 2022-12-30

7lrncoxx2#

使用clear: both;属性。