自动跨度宽度

Question

我有一个标题的HTML。 .left和.right为空跨度。我有.left的特定宽度，但.text宽度并不总是相同。我想设置.left（固定宽度）和.right的背景。 .right应该获得父元素（h1）中的所有剩余空间。怎么做？

<h1>
    <span class="left"></span>
    <span class="text">Text</span>
    <span class="right"></span>
</h1>

我正在尝试使用不起作用的CSS：

.left{
    background: yellow;
    width: 30px;
    height: 20px;
    display: inline-block;
}

.right{
    display: inline-block;
    background: blue;   
}

这是JSFiddle链接： http://jsfiddle.net/jMR8u/

以下是我想要的内容：

我的想法是在h1中设置除.text范围之外的背景图像，问题是我无法为.text设置背景，否则会更容易。

Answer 1

此版本将展开以适合.text的内容，并且应该是跨浏览器。

您可以将蓝色（右侧）背景设为.text：

的边框来伪造它

.text { border-right: 1000px solid; }

然后，将.right向左移动1000px：

.right { margin-left: -1000px; }

将宽度设为.left，制作每个元素inline-block，隐藏右侧的额外蓝色边框，并确保.text和.right不会换行新行：

.left { width: 200px; }
.left, .text, .right { display: inline-block; }
h1 { overflow: hidden; white-space: nowrap; }

并给它颜色！

body { background: green; }
.left { background: red; }
.text { border-color: blue; }

这是一个JSFiddle demonstration：

Answer 2

如果我解释你的图像正确..这就是答案http://jsfiddle.net/jMR8u/4/

h1{
    border: 1px solid red;
    position: relative; 
}

.left{
    background: yellow;
    width: 30px;
    height: 20px;
    display: inline-block;
}

.right{
    display: inline-block;
    background: blue;
    position: absolute; 
    z-index: 99;
    height: 20px;
    width: 100%;
}
​.text {
    height: 20px;
    width: 150px;
    display: inline-block;
    position: relative;
    z-index; 101;
}​

好的，然后使用图层..使用z-index和定位

Answer 3

您可以使用flexbox（但使用new syntax）。可悲的是，它现在仅适用于Chrome and Opera，所以这个用途有限：

h1 { display: -webkit-flex; display: flex; }
.left { width: 30px; }
.right { flex: 1; -webkit-flex: 1; } /* This makes it fluid. */
.left { background: yellow; }
.right { background: blue; }

这是一个JSFiddle演示：http://jsfiddle.net/FN7vQ/

Answer 4

如果可以将宽度设置为.text span和h1元素。

body{
background:green;
}

h1{
    border: 1px solid red;
    display:table;
    width:100%;
}

.left{
    background: yellow;
    width: 30px;
    display: table-cell;
}

.right{
    display: table-cell;
    background: blue;
}
.text {
    display:table-cell;
    width: 150px;   
}

Answer 5

如果我理解你的要求。你应该稍微改变你的标记

＆＃13;

＆＃13;

h1 {
  background: #660000;
  padding-left: 30px;
  line-height: 1.1;
}
h1 span {
  background: #fff;
  padding: 0 3px;
  color: #600;
}

＆＃13;

<h1>
  <span>
  Lorem, ipsum dolor. you are doing great  
  </span>  
</h1>

＆＃13;

＆＃13;

＆＃13;

和CSS在下面