三个重叠<span> s </span>

Question

是否可能有3 <span>个重叠，因此一个位于左侧，一个位于右侧，另一个位于<div>的宽度的100％处？

它应该是这样的：

我有以下代码：

#1 {
    float: left;
}

#2 {
    float: right;
}

#3 {
    display: inline-block;
    width: 100%;
    text-align: center;
}

这导致一件事情向下移动：

Answer 1

您可以使用CSS浮动来达到此结果 float:left和float:right

示例：

#span1{
float:left;
}
#span2{
float:right;
}

并根据需要将其拉伸至100％宽度：

span{
display:block;
}
#div3{
width:100%; /* this is default */
display:block; /* also default */
}

使用HTML

<div id='div3'><span id='span1'></span><span id='span2'></span></div>

Answer 2

我认为最简单，最灵活的方法是将跨度添加到容器中。您可以将position: absolute添加到跨度。通过将position: relative添加到容器中，可以将跨度放置在容器内。

HTML：

<div class="container">
  <span class="span1">1</span>
  <span class="span2">2</span>
  <span class="span3">3</span>
</div>

CSS：

.container {
    width: 500px; /* Just to prove that the spans obey this */
    background-color: blue; /* Will be covered by span3*/
    position: relative; /* Allows positioning of spans inside container*/
}
span {
    display: block;
    padding: 0 2em; /* Just add some body to them */
}
.span1 {
    background-color: green;
    position: absolute;
    left: 0; /* This one is on the left (overlapping span3) */
    top:0;
}
.span2 {
    background-color: red;
    position: absolute;
    right: 0; /* This one is on the right (overlapping span3) */
    top:0;
}
.span3 {
    background-color: lightblue;
    text-align: center; /* This span is full width, so center the text in it */
}

http://jsfiddle.net/g2ppS/1/

请注意，span3实际上是容器div的（内部）宽度的100％。 span1和span2重叠span3。这似乎正是你所要求的，但是知道span3的内容可能被其他跨度遮挡。

Answer 3

你走了。

<强> FIDDLE

<span class="parent">
    <span class="child1"></span>
    <span class="child2"></span>
</span>

---

.parent{
    display:block;
    background-color:#eee;
    height:30px;
}
.child1,.child2{
    display:inline-block;
    float:left;
    width:20%;
    background-color:red;
    height:30px;
}
.child2{
    float:right;
    background-color:blue;
}