Ich versuche, eine Webseite mit zwei Spalten zu erstellen, eine Seite mit Hauptinhalt und die andere mit zusätzlichem Inhalt. Da ich aber die Float-Eigenschaft verwende, um die zusätzliche Spalte links auszurichten, wird sie horizontal gestapelt, ich möchte jedoch, dass sie vertikal gestapelt wird.
Mein aktueller Code:
.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>
Ich habe versucht, die Eigenschaft „Vertikale Ausrichtung“ zu verwenden, aber sie hat nichts bewirkt. Was soll passieren
使用
clear: Both;
属性。通过使用
column
可以垂直堆叠列。通过使用row
各列是并排的。