柔韌性：並排對齊兩個項目，但沒有最大寬度

Question

我不知道flex是否可行，但是我需要的是並排有兩個項目的列表，每個項目的寬度取決於內容。 像這兒：

<div class="items">
  <div class="item">Item 1 with text</div>
  <div class="item">Item 2 with more text</div>
  <div class="item">Item 3 with some text</div>
  <div class="item">Item 4 without text</div>
  <div class="item">Item 5 lorem</div>
  <div class="item">Item 6 ipsum</div>
  <div class="item">Item 7 with lorem</div>
  <div class="item">Item 8 with ipsum</div>
</div>

.items {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.item {
  align-self: flex-end;
  box-sizing: border-box;
  background: #e0ddd5;
  color: #171e42;
  padding: 10px;
}

.item:nth-child(even) {
  background-color: darkgrey;
}

我怎么能知道無論我有多少李物品，總是有兩個物品並排？ 沒有限制寬度的外部容器。 我不想使用浮點數。 網格模板列是否有靈活的解決方案？

最終結果如下（但向右對齊）：

Answer 1

如果禁止float ，我為您提供了一個簡單的解決方案！ :)
我們將使用inline ， block ， :nth-child和::after 。

我們去了：

 .item { display: inline; } .item:nth-child(2n)::after { display: block; content: ''; } 

 <div class="items"> <div class="item">Item 1 with text</div> <div class="item">Item 2 with more text</div> <div class="item">Item 3 with some text</div> <div class="item">Item 4 without text</div> <div class="item">Item 5 lorem</div> <div class="item">Item 6 ipsum</div> <div class="item">Item 7 with lorem</div> <div class="item">Item 8 with ipsum</div> </div> 

很簡單 ，不是嗎？

Answer 2

除了亞歷山大的答案，如果可以添加一個內部包裝器，這是一個選項，您可以使用顯示為inline-block的內部div進行樣式設置，例如填充等。

由於我們處理內聯元素，因此它們像字符一樣可以在它們之間留有空格。 一種方法是使用負邊距將其取出，這是其他一些選擇：

• 如何刪除內聯塊元素之間的空間？

注意，由於空格寬度基於字體，因此負邊距可能需要調整。

---

堆棧片段

 .items { text-align: right; } .item { display: inline; margin-right: -4px; /* take out inline element space */ } .item div { display: inline-block; background: #e0ddd5; color: #171e42; padding: 10px; } .item:nth-child(even) div { background-color: darkgrey; } .item:nth-child(even)::after { content: '\\A'; white-space: pre; } 

 <div class="items"> <div class="item"><div> Item 1 with text </div></div> <div class="item"><div> Item 2 with more text </div></div> <div class="item"><div> Item 3 with some text </div></div> <div class="item"><div> Item 4 without text </div></div> <div class="item"><div> Item 5 lorem </div></div> <div class="item"><div> Item 6 ipsum </div></div> <div class="item"><div> Item 7 with lorem </div></div> <div class="item"><div> Item 8 with ipsum </div></div> </div> 

Answer 3

您是否嘗試過CSS列？

 .items { columns: 2 } 

 <div class="items"> <div class="item">Item 1 with text</div> <div class="item">Item 2 with more text</div> <div class="item">Item 3 with some text</div> <div class="item">Item 4 without text</div> <div class="item">Item 5 lorem</div> <div class="item">Item 6 ipsum</div> <div class="item">Item 7 with lorem</div> <div class="item">Item 8 with ipsum</div> </div>