调整三个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标记 - 固定左侧，固定右侧，填充中间

回答

相关问题