我正在嘗試製作一個包含兩列的網(wǎng)頁，一側(cè)具有主要內(nèi)容，另一側(cè)具有額外的內(nèi)容。但是因為我使用浮動屬性將額外的列向左對齊，所以它水平堆疊，但我希望它垂直堆疊。
我目前的程式碼：
.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 屬性，但它沒有任何作用。 我想要發(fā)生什麼
2
0
0
透過使用 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;
}
AboutLorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in euismod est. Curabitur euismod ultrices pellentesque. Morbi condimentum venenatis nibh sed feugiat.
AboutLorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in euismod est. Curabitur euismod ultrices pellentesque. Morbi condimentum venenatis nibh sed feugiat.
