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.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; }