Question

我连续4个跨度。

<div id=container>
     <span id="1">blue</span>
     <span id="2">red</span>
     <span id="center">all colors</span>
     <span id="3">grey</span>
</div>

我希望在网页浏览器的中心有“所有颜色”，左边是蓝色和红色，右边是灰色。

我怎么能这样做？

Answer 1

<div id="container">
<span class="float_l blue">blue</span>
<span class="float_l red">red</span>
<span>all colors</span>
<span class="float_r gray">grey</span> 
</div>

#container {text-align:center;overflow:hidden;}
#container span {display:block;width:auto;height:20px;line-height:20px;padding:0 10px;}
.float_l {float:left;}
.float_r {float:right;}
.blue {background:blue;}
.red {background:red;}
.gray {background:#ccc;}

如果你想让右浮动元素与其他元素在同一行中，你必须将它放在左浮动元素之前。

Answer 2

你可以用空的空间填充每一边，所以#center总是算在中间吗？

如果是这样，您可以将每个范围设置为display: table-cell（可能是表格或表格行的父级，不知道是否需要使其填充宽度）宽度，或至少除#center以外的所有宽度。

编辑：好吧，我在Firefox中一直在使用它，它完全没有达到我的预期，所以我能想到的唯一解决方案是脚本化放置。

修改：实际上，它适用于具有display: table 和宽度的div设置。 *耸肩*

中心跨度4？

2 个答案: