automatische Spannweite

Habe ich folgenden HTML-Code für eine überschrift. Die .left und .right leer sind, umfasst. Ich habe bestimmte Breite für die .Links und aber die .text Breite ist nicht immer gleich. Ich möchte den hintergrund für den .Links (Feste Breite) und die .right. Die .right sollten sich mit allen verbleibenden Platz in der parent-element (h1). Wie dies erreicht werden kann?

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

Ich versuche folgenden CSS, die funktioniert nicht:

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

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

Hier ist das JSFiddle link:
http://jsfiddle.net/jMR8u/

Hier ist, was ich versuche zu bekommen: automatische Spannweite

Die Idee ist, legen Sie ein Hintergrundbild im 1. Halbjahr mit Ausnahme der .text span und das problem ist, dass ich nicht den hintergrund für den .text, sonst wäre es einfacher.

Ich kann nicht verstehen, was Sie versuchen zu tun, könnte Sie vielleicht zeichnen Sie ein Bild von dem, was Sie versuchen zu erreichen?
"Die .right [span] sollten sich mit allen verbleibenden Platz in der parent-element (h1)."
Hinzugefügt habe ich das Bild. Ich weiß, es wäre einfacher, wenn ich könnte bg für h1 und legen Sie dann die bg für die .text span, aber das problem ist, dass ich nicht gesetzt-bg .text (denn es sollte der hintergrund des Körpers)

InformationsquelleAutor user1355300 | 2012-12-05

css html

1

wenn interpretiere ich dein Bild richtig .. das ist die Antwort 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, dann verwenden Sie Ebenen .. mit z-index und Positionierung
- Weil die .der text sollte der gleiche hintergrund des h1-Eltern-bg.
- Dieser Weg ist der einfachere. Wenn Sie nicht Schauspielern können innerhalb der H1, dann handeln außerhalb ... fügen Sie ein div rund um die H1 mit einem farbigen hintergrund und legen Sie Ihre H1-mit weißem hintergrund und linken/rechten Rand ?
- überprüfen Sie diese neue Version, in der fiddle - jsfiddle.net/jMR8u/4
- wow, vielen Dank Mik.
InformationsquelleAutor Mik
2

Diese version wird Strecken, um zu passen der Inhalt .text und sollte cross-browser.

Können Sie fake die Blaue (rechts) im hintergrund, indem es eine Grenze .text:
```
.text { border-right: 1000px solid; }
```
Dann shift .right Links von 1000px:
```
.right { margin-left: -1000px; }
```
Geben eine Breite .left, machen jedes element inline-block werden, blenden Sie die extra blauen Rand auf der rechten Seite, und stellen Sie sicher, dass .text und .right keinen Zeilenumbruch in eine neue Zeile:
```
.left { width: 200px; }
.left, .text, .right { display: inline-block; }
h1 { overflow: hidden; white-space: nowrap; }
```
Und geben ihm Farbe!
```
body { background: green; }
.left { background: red; }
.text { border-color: blue; }
```
Hier ein JSFiddle demonstration:
- Vielen Dank Andres für die nette Lösung.
InformationsquelleAutor Andres Riofrio
1

Könnten Sie flexbox (aber verwenden Sie die neue syntax). Leider funktioniert das nur auf Chrome und Opera jetzt also nur eingeschränkt Sinn hat:
```
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; }
```
Hier ein JSFiddle Demo: http://jsfiddle.net/FN7vQ/
- Das ist genau das, was ich versuche zu bekommen, aber ich brauche die großen Browser unterstützen (zumindest FF)
- Siehe mein andere Antwort für eine kompatible Lösung.
InformationsquelleAutor Andres Riofrio

wenn Sie können die Breite der .text span-und h1-element.

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

InformationsquelleAutor Sergiy T.

Wenn Verstand ich Ihre Anforderung korrekt. sollten Sie Ihre markup-ein bisschen wie unter

CSS:

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

HTML:

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

und CSS geht hier unten

InformationsquelleAutor Raji

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.