largeur de travée automatique

Question

J'ai HTML suivant pour un en-tête. Les .left et .right sont des intervalles vides. J'ai la largeur spécifique pour le .left et mais la largeur .text n'est pas toujours la même chose. Je veux définir l'arrière-plan pour le .left (largeur fixe) et le .right. Le .right devrait obtenir tout l'espace restant dans l'élément parent (h1). Comment cela peut-il être fait?

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

J'essaie CSS suivant qui ne fonctionne pas:

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

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

Voici le lien jsFiddle: http://jsfiddle.net/jMR8u/

Voici ce que je suis en train de faire:

L'idée est de définir une image de fond en h1 à l'exception de la .text span et le problème est que je ne peux pas définir le backg rond pour le .text, sinon ce serait plus facile.

Answer 1

si j'interprète l'image correcte .. ceci est la réponse 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; 
}​ 

ok, puis utilisez des couches .. avec z-index et le positionnement

Answer 2

Vous pouvez utiliser FlexBox (mais utiliser le new syntax). Malheureusement, il ne fonctionne que sur Chrome and Opera pour l'instant, donc cela a une utilité limitée:

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

Voici une démonstration jsFiddle: http://jsfiddle.net/FN7vQ/

Answer 3

si vous pouvez définir la largeur de la durée .text et élément 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 4

Cette version Étirer pour adapter le contenu de .text et devrait être multi-navigateur.

Vous pouvez fond faux le bleu (à droite) en faisant une bordure de .text:

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

Ensuite, passer .right à gauche par 1000px:

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

Donner une largeur .left, faites chaque élément inline-block, masquer la bordure bleue supplémentaire sur la droite, et assurez-vous que .text et .right n'emballent pas à une nouvelle ligne:

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

Et donnez-lui de la couleur!

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

Voici une jsFiddle demonstration:

Answer 5

Si je comprends bien votre exigence correctement.vous devriez changer votre balisage un peu comme ci-dessous

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

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

et CSS va ici-bas