如何在沒有額外垂直空間的情況下在兩列中顯示div串列-有解無憂

使用下面的代碼段，div 之間的左側會出現額外的空格。是否可以在不更改 HTML 架構的情況下創建兩列？每個都可以有動態內容，因此可以有動態的垂直空間。我正在嘗試為和孩子child擺弄??不同的 CSS 組合。parent

.parent{

}

.child{
  display:flex;
  float:left;
  width: 48%;
  padding: 3px;
  border: 1px solid red;
  background-color: gray;
}


/** Ignore below */
.child1{
  background-color: green;
}
.child2{
  background-color: blue;
}
.child3{
  background-color: darkblue;
}
.child4{
  background-color: lightgreen;
}
.child5{
  background-color: yellow;
}
.child6{
  background-color: #989898;
}
.child7{
  background-color: #545454;
}

<div class="parent">
  <div class="child child1">Child 1 text here Child 1 text here Child 1 text here Child 1 text here 
  </div>
  <div class="child child2">Child 2 text here Child 2 text here Child 2 text here Child 2 text here Child 2 text here Child 2 text here Child 2 text here Child 2 text here Child 2 text here Child 2 text here Child 2 text here 
  </div>
  <div class="child child3">Child 3 text here Child 3 text here Child 3 text here Child 3 text here Child 3 text here Child 3 text here 
  </div>
  <div class="child child4">Child 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text here 
  </div>
  <div class="child child5">Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here 
  </div>
  <div class="child child6">Child 6  text here Child 6  text here Child 6  text here Child 6  text here 
  </div>
  <div class="child child7">Child 7  text here 
  </div>
</div>

uj5u.com熱心網友回復：

使用flex-direction: row和flex-wrap: wrap洗掉float: left

它將占據頁面的整個寬度，直到沒有更多空間，它將換行

在你的情況下，因為你有 48% 的寬度，它將變成 2 列，剩下 4%

uj5u.com熱心網友回復：

到目前為止，您還不能使用純 CSS 進行完整的“砌體”布局，但是您可以獲得兩列，其中剩余空間（如果有的話）將僅在末尾。

移除 flex 和 width 設定并使用 columns 屬性。

.parent{
  columns: 2;
}

.child{
  padding: 3px;
  border: 1px solid red;
  background-color: gray;
}


/** Ignore below */
.child1{
  background-color: green;
}
.child2{
  background-color: blue;
}
.child3{
  background-color: darkblue;
}
.child4{
  background-color: lightgreen;
}
.child5{
  background-color: yellow;
}
.child6{
  background-color: #989898;
}
.child7{
  background-color: #545454;
}

<div class="parent">
  <div class="child child1">Child 1 text here Child 1 text here Child 1 text here Child 1 text here 
  </div>
  <div class="child child2">Child 2 text here Child 2 text here Child 2 text here Child 2 text here Child 2 text here Child 2 text here Child 2 text here Child 2 text here Child 2 text here Child 2 text here Child 2 text here 
  </div>
  <div class="child child3">Child 3 text here Child 3 text here Child 3 text here Child 3 text here Child 3 text here Child 3 text here 
  </div>
  <div class="child child4">Child 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text here 
  </div>
  <div class="child child5">Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here 
  </div>
  <div class="child child6">Child 6  text here Child 6  text here Child 6  text here Child 6  text here 
  </div>
  <div class="child child7">Child 7  text here 
  </div>
</div>

uj5u.com熱心網友回復：

另一種可能的方法是使用display: inline-block;.

.parent {
  background-color: #aaa;
  margin: 0 auto;
  height: 100%;
  width: 500px;
  column-count: 2;
  gap: 10px;
  padding: 5px;
}

.child {  
  padding:10px;
  background-color: white;
  border: 1px solid black;
  width: 100%;  
  display: inline-block;
  box-sizing: border-box;
  margin-bottom: 5px;
}

child1{
  background-color: green;
}
.child2{
  background-color: blue;
}
.child3{
  background-color: darkblue;
}
.child4{
  background-color: lightgreen;
}
.child5{
  background-color: yellow;
}
.child6{
  background-color: #989898;
}
.child7{
  background-color: #545454;
}

<div class="parent">
  <div class="child child1">Child 1 text here Child 1 text here Child 1 text here Child 1 text here 
  </div>
  <div class="child child2">Child 2 text here Child 2 text here Child 2 text here Child 2 text here Child 2 text here Child 2 text here Child 2 text here Child 2 text here Child 2 text here Child 2 text here Child 2 text here 
  </div>
  <div class="child child3">Child 3 text here Child 3 text here Child 3 text here Child 3 text here Child 3 text here Child 3 text here 
  </div>
  <div class="child child4">Child 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text here 
  </div>
  <div class="child child5">Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here 
  </div>
  <div class="child child6">Child 6  text here Child 6  text here Child 6  text here Child 6  text here 
  </div>
  <div class="child child7">Child 7  text here 
  </div>
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/468026.html

標籤：html css 弹性盒

上一篇：我怎樣才能隱藏這個css物件？

下一篇：我的POST表單沒有傳遞資料我沒有收到錯誤訊息，我只是被重定向到下一頁而沒有處理資料