我正在尝试制作一个包含两列的网页,一侧具有主要内容,另一侧具有额外的内容。但是因为我使用浮动属性将额外的列向左对齐,所以它水平堆叠,但我希望它垂直堆叠。
我当前的代码:
.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;
}
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.
我尝试过使用 Vertical-align 属性,但它没有任何作用。 我想要发生什么
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
使用
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; }