我正在尝试制作一个包含两列的网页，一侧具有主要内容，另一侧具有额外的内容。但是因为我使用浮动属性将额外的列向左对齐，所以它水平堆叠，但我希望它垂直堆叠。
我当前的代码：
.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 属性，但它没有任何作用。 我想要发生什么
使用
clear: Both;属性。.column.side{ clear:both; }通过使用
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; }