圍繞浮動的左 div 垂直對齊 div

Question

css 中是否有辦法對齊 3 個 div（如圖所示），其中第一個向左浮動，容器高度 = div 高度（+ 填充），第二個和第三個組合在容器中垂直對齊？

我試過這個，但不能完全到達那里。

 .x { width: 100%; height: 56px; display: flex; flex-wrap: wrap; align-items: center; }.x>:nth-child(1) { display: block; float: left; width: 48px; height: 48px; border-radius: 50%; border: solid 1px #333333; margin: 4px 16px 4px 4px; }.x>:nth-child(2) { font-size: 12pt; }.x::after { content: ''; width: 100%; }.x>:nth-child(3) { font-size: 10pt; font-weight: 600; order: 1; }

 <div class="x"> <div></div> <div>Line 1</div> <div>Line 2</div> </div>

我寧願從第一個 div 中刪除大小，並盡可能讓它自動發生

Answer 1

您只需要將最后兩個 div 包裝在一個容器中。

這是工作解決方案。 https://jsfiddle.net/manoj1234/aqLy97wb/

 .x { width: 100%; height: 56px; display: flex; flex-wrap: wrap; align-items: center; }.x>:nth-child(1) { display: block; float: left; width: 48px; height: 48px; border-radius: 50%; border: solid 1px #333333; margin: 4px 16px 4px 4px; }.x>:nth-child(2) { font-size: 12pt; }.x::after { content: ''; width: 100%; }.x>:nth-child(3) { font-size: 10pt; font-weight: 600; order: 1; }

 <div class="x"> <div></div> <div id="col-2-container"> <div>Line 1</div> <div>Line 2</div> </div> </div>

Answer 2

只需將最后兩個 div 包裝在另一個 div 中

 .x { width: 100%; height: 56px; display: flex; flex-wrap: wrap; align-items: center; }.x>:nth-child(1) { display: block; float: left; width: 48px; height: 48px; border-radius: 50%; border: solid 1px #333333; margin: 4px 16px 4px 4px; }.x>:nth-child(2) { font-size: 12pt; }.x::after { content: ''; width: 100%; }.x>:nth-child(3) { font-size: 10pt; font-weight: 600; order: 1; }

 <div class="x"> <div></div> <div> <div>Line 1</div> <div>Line 2</div> </div> </div>