Question

好的，这让我疯了！

我想要一行中有三个div或span标签。左= 57px宽度图像;右= 57px图像;中心=填充整个宽度的跨度图像。

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

基本上我正在绘制一个花哨的hr线，每一端都淡出。我可以使用float：left来对齐左右图像;和浮动：对;但中间似乎不可能。

有什么想法吗？

Answer 1

这可以吗？

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

Answer 2

将浮动的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>

Answer 3

传统上，当你想要像这样端到端排队时，你可以向左或向右浮动所有。

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

3 个答案: