當左列的寬度固定時，我如何使右列占據整個剩余空間，然后在其中居中放置文本？

Question

當左列的寬度固定時，我如何使右列占據整個剩余空間，然后將其中的一個元素居中？

這就是到目前為止。 它正在創建僅與文本一樣寬的右列，並將該列發送到父元素的右邊。

 #left-col { width: 250px; float: left; } #right-col { width: auto; text-align: center; float: right; } #right-col-element { color: #f00; display: inline-block; } 

 <div id="left-col"> </div> <div id="right-col"> <div id="right-col-element">text</div> </div> 

Answer 1

您可以使用絕對位置並設置頂部和左側：

 #left-col { width: 250px; float: left; border: 1px solid red; height: 200px; } #right-col { position: absolute; border: 1px solid blue; left: 50%; top: 50%; height: auto; transform: translate(-50%, -50%); border: 1px solid green; } 

 <div id="left-col"> left left left </div> <div id="right-col"> <div>text <span>span</span> <div>last one</div> </div> </div> 

還有一些提示：

1. 使用類而不是ID。
2. 要垂直測試中心對齊的項目時，請始終設置高度
3. 如果您水平地進行相同操作，則始終設置寬度

Answer 2

最簡單的方法是使用flexbox並將flex-grow分配給要占用可用空間的元素。

 .wrap { display: flex; } #left-col { width: 100px; background: #ccc; } #right-col { flex-grow: 1; text-align: center; background: #eee; } 

 <div class="wrap"> <div id="left-col"> </div> <div id="right-col"> <div id="right-col-element">text</div> </div> </div> 

Answer 3

Flexbox的

您可以設置flex: 1; 用於流體元件而不收縮。

 .flex { display: flex; } .fixed { width: 250px; border: 1px solid green; } .fluid { flex: 1; text-align: center; border: 1px solid red; } 

 <div class="flex"> <div class="fixed"> Fixed </div> <div class="fluid"> Fluid </div> </div> 

舊樣式：使用overflow: hidden;

除了彈性解決方案，您還可以使用overflow: hidden以使流體元素占據剩余空間：

 .fixed { float: left; width: 250px; border: 1px solid green; } .fluid { overflow: hidden; text-align: center; border: 1px solid red; } 

 <div class="fixed"> Fixed </div> <div class="fluid"> Fluid </div> 

舊樣式： display: table-cell;

 .table { display: table; width: 100%; } .fixed { display: table-cell; width: 250px; border: 1px solid green; } .fluid { border: 1px solid red; } 

 <div class="table"> <div class="fixed"> Fixed </div> <div class="fluid"> Fluid </div> </div> 

Answer 4

一種方法是通過設置right-col元素的margin-left屬性來匹配left-col元素的寬度。

#left-col {
  width: 250px;
  float: left;
  border: 1px solid black;
}

#right-col {
  margin-left:250px;
  text-align: center;
  border: 1px solid red;
}

在這里查看小提琴https://jsfiddle.net/e3kbhfo1/