html和css中的div對齊

Question

我試過這個 html 和 CSS ，

 .divcss{ width: 48%; margin-right: 5px; margin-bottom: 8px; vertical-align: top; display: inline-block; }

 <div> <div class="divcss"> Div1 </div> <div class="divcss"> Div2 </div> <div class="divcss"> Div3 </div> <div class="divcss"> Div4 </div> <div class="divcss"> Div5 </div> <div class="divcss"> Div6 </div> </div>

只有 6 個 div 不是強制性的，它是動態的

我想按以下順序對齊 div：-

Div1 Div4

Div2 Div5

Div3 Div6

Answer 1

向您的父 div 添加一個額外的類，定義列布局。

CSS：

.divcss {
width: 48%;
margin-right: 5px;
margin-bottom: 8px;
vertical-align: top;
display: inline-block;
}

.layout {
 columns: 2;
 height: 50%;
}

HTML：

 <div class="layout">
  <div class="divcss"> Div1 </div>
  <div class="divcss"> Div2 </div>
  <div class="divcss"> Div3 </div>
  <div class="divcss"> Div4 </div>
  <div class="divcss"> Div5 </div>
  <div class="divcss"> Div6 </div>
 </div>

Answer 2

檢查這個。 希望能幫助到你。

 .columns{ width: 50%; /*vertical-align: top; display: inline-block;*/ float: left; } .divcss{ display:block; margin-right: 5px; margin-bottom: 8px; }

 <div> <div class="columns"> <div class="divcss"> Div1 </div> <div class="divcss"> Div2 </div> <div class="divcss"> Div3 </div> </div> <div class="columns"> <div class="divcss"> Div4 </div> <div class="divcss"> Div5 </div> <div class="divcss"> Div6 </div> </div> </div>

Answer 3

您只需要制作兩列甚至一列，然后將您的內容放入其中/我喜歡制作兩列以給每列一種樣式。

 <style> .divcss{ width: 200px; margin-right: 5px; margin-bottom: 8px; vertical-align: top; } .rcolumn { float:left; } .lcolumn { float:left; } </style>

 <div class="lcolumn"> <div class="divcss"> Div1 </div> <div class="divcss"> Div2 </div> <div class="divcss"> Div3 </div> </div> <div class="rcolumn"> <div class="divcss"> Div4 </div> <div class="divcss"> Div5 </div> <div class="divcss"> Div6 </div> </div>