調整三個SPAN/DIV標記 - 固定左側，固定右側，填充中間

好吧，這讓我瘋狂！調整三個SPAN/DIV標記 - 固定左側，固定右側，填充中間

我想在一行中有三個div或span標籤。左= 57px寬的圖像; Right = 57px圖片;中心=一個跨度圖像來填充整個寬度。

<div class="bar-left"></div> 
<div class="bar-span"></div> 
<div class="bar-right"></div>

基本上我正在繪製一個花哨的小時行，每一端都淡出。我可以使用float：left獲得左右圖像對齊。和float：right;但中間似乎不可能。

任何想法？

來源

2011-07-25 pfeds

這會好嗎？

JSFiddle

的想法是把左，右柱頂部和浮動它們，然後把保證金內容div因此不會下浮動那些包裹...

<div class="bar-left"></div> 
<div class="bar-right"></div> 
<!- content goes in last --> 
<div class="bar-span"></div>

CSS：

.bar-left 
{ 
    float: left; 
    width: 57px; 
} 

.bar-right 
{ 
    float:right; 
    width: 57px; 
} 

.bar-span 
{ 
    margin: 0 70px; 
}

來源

2011-07-25 21:00:23

好東西 - 非常感謝。對於跨欄我自然必須使用** margin：0 57px; **，但我可以原諒你一個錯字; o） – pfeds

把你的浮動的div的非浮動的問題之前：

<div class="bar-left" style="float: left; color: blue; background-color: blue; width: 57px;">&nbsp;</div> 
<div class="bar-right" style="float: right; width: 57px; background-color: blue;">&nbsp;</div> 
<div class="bar-span" style="background-color: green; display: block;">&nbsp;</div>

來源

2011-07-25 21:01:20

傳統意義上，當您想要將這件事端到端排列起來時，您可以將它們左右浮動全部。

來源

2011-07-25 21:01:23

調整三個SPAN/DIV標記 - 固定左側，固定右側，填充中間

回答

相關問題