我正在尝试制作一个包含两列的网页,一侧具有主要内容,另一侧具有额外的内容。但是因为我使用浮动属性将额外的列向左对齐,所以它水平堆叠,但我希望它垂直堆叠。
我当前的代码:
.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粉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; }
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.