对齐三个SPAN/DIV标签 - 左侧固定，右侧固定，中间填充

Question

我想要在一行中有三个 <div> 或 <span> 标签。

• 左侧 = 一个宽度为57像素的图像
• 右侧 = 一个宽度为57像素的图像
• 中间 = 一个跨越整个宽度的 span 图像。

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

我正在绘制一个花哨的 hr 线，每个端点都会淡出。我可以使用 float: left; 和 float: right; 将左右图像对齐，但中间似乎不可能。

- pfeds

Answer 1

这样可以吗？ JSFiddle 这个想法是将左右列置于顶部，然后浮动它们，再给内容的

添加边距，这样就不会被浮动的元素覆盖了...

<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;
}

- Robert Koritnik

---

太棒了 - 非常感谢。对于bar-span，我自然不得不使用**margin:0 57px;**，但我可以原谅您的打字错误; o) - pfeds

Answer 2

传统上，当您想要将这些东西像这样一端对齐时，您会将它们全部向左或向右浮动。

- Joseph Marikle

Answer 3

将浮动的 div 放在非浮动的 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>

- Jeff Paquette