兩列div佈局，文本對齊正確

我正在尋找最佳的方式來創建一個左對齊的文本塊和右對齊文本塊內的一個div。兩列div佈局，文本對齊正確

This is an image of what I want it to look like

我想過一個在充當緩衝中間創建三個div S，但它似乎並沒有工作。我需要硬編碼中間div的長度，這似乎並不像爲什麼不使用第二格的「文本對齊」屬性的最佳方法

<div style="width: 500px;"> 
<div style="float: left;">left aligned text</div> 
<div style="float: left; width: 100%" > </div> 
<div style="float: left;">right aligned text </div> 
</div>

來源

2011-03-19 Mike

當你說「右對齊文本」，你的意思是'文本對齊：正確的'，或者只是左對齊的文本，在父div的右側？ – thirtydot 2011-03-19 19:05:58

到父div的右側 – Mike 2011-03-19 19:07:06

那麼，@ Kau-Boy有它，如果你只是從他的演示中刪除'text-align：right'。 – thirtydot 2011-03-19 19:09:36

？

<div style="width: 500px;"> 
<div style="float: left;">left aligned text</div> 
<div style="float: right; text-align: right;">right aligned text </div> 
</div>

編輯：你不需要一箇中間的DIV的間距。你可以簡單的使用百分比寬度兩個其他的DIV和使用浮動左，右，你有一個「緩衝」：

<div style="width: 500px;"> 
<div style="float: left; width: 45%;">left aligned text</div> 
<div style="float: right; text-align: right; width: 45%;">right aligned text </div> 
</div>

來源

2011-03-19 18:58:50 2ndkauboy

是否會將「右對齊文本」推送到父div的右側？ – Mike 2011-03-19 19:00:11

是的，你會看到這裏：http://jsbin.com/evizu4 – 2ndkauboy 2011-03-19 19:06:03

試試這個 -

<div style="width: 500px;"> 
<div style="float:left">left aligned text</div> 
<div style="text-align: right;">right aligned text </div> 
</div>

來源

2011-03-19 19:47:48

這不會解決他想做的事情。 – 2ndkauboy 2011-03-19 20:30:28

兩列div佈局，文本對齊正確

回答

相關問題