Wie kann man zwei divs nebeneinander, dem LINKEN eine Größe zu passen, und andere, nimmt den verbleibenden Platz?

Ich versuche, zwei div ' s nebeneinander mit den folgenden Kriterien:

  1. Beide divs müssen, bleiben auf der gleichen Linie.
  2. Priorität eingeräumt werden muss, um die Links div. So viel text wie möglich angezeigt werden soll, in das linke div, bis zu dem Punkt, wo Auslassungszeichen wird verwendet, wenn der überlauf.
  3. Der Rechte div text sollte rechts ausgerichtet. Im Falle von überlauf, Auslassungszeichen verwendet werden soll.
  4. Text ist dynamisch, so dass keine Prozentsätze oder Feste breiten verwendet werden kann.
  5. Muss nur arbeiten auf webkit - basierte browser, also CSS3 Lösung bevorzugt.

Hier sind einige Beispiel-Bilder, wie es Aussehen würde:

Eingang

<div class='left'>I should always fit. If not, ellipsis should be used.</div><div class='right'>Right align and fit me if space available here.</div>

Ausgabe

Wie kann man zwei divs nebeneinander, dem LINKEN eine Größe zu passen, und andere, nimmt den verbleibenden Platz?

Eingang

<div class='left'>I should always fit. If not, ellipsis should be used. And some more text and more, and more text.</div><div class='right'>Right align and fit me if space available here.</div>

Ausgabe

Wie kann man zwei divs nebeneinander, dem LINKEN eine Größe zu passen, und andere, nimmt den verbleibenden Platz?

Eingang

<div class='left'>This text is left aligned.</div><div class='right'>This text is right aligned.</div>

Ausgabe

Wie kann man zwei divs nebeneinander, dem LINKEN eine Größe zu passen, und andere, nimmt den verbleibenden Platz?

InformationsquelleAutor der Frage Philip Murphy | 2013-09-16

  1. 9

    Habe ich es mit der Ausnahme, dass, wenn es leeren Raum meine Rechte div ist, es zu Essen (mit text rechts ausgerichtet). Sie don ' T-Liste, die als eine Frage, also ich war nicht sicher, ob es war genau so, wie du es gemalt? Fiedel hier: http://jsfiddle.net/mdares/fSCr6/

    HTML: 

    <div class="container">
    <div class="left">Some Text, Repeat, Repeat, Repeat, ,Some Text, and then: </div>
    <div class="right">other Text ttt other Text tttother Text tttother Text ttt</div>
</div>

<p />

<div class="container">
    <div class="left">Some Text, Repeat, Repeat, Repeat, ,Some Text, Some Text, Repeat, Repeat, Repeat, ,Some Text,</div>
    <div class="right">other Text ttt other Text tttother Text tttother Text ttt</div>
</div>

<p />

<div class="container">
    <div class="left">Some Text, Repeat, Repeat, Repeat, ,Some Text, </div>
    <div class="right">other Text ttt</div>
</div>

    CSS: 

    .container {
    width: 600px;
}
.left {
    max-width: 100%;
    background:red;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    -ms-text-overflow:ellipsis;
    float: left;
}
.right {
    background:yellow;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    -ms-text-overflow:ellipsis;
    text-align: right;
}

    Und schließlich:

    Wie kann man zwei divs nebeneinander, dem LINKEN eine Größe zu passen, und andere, nimmt den verbleibenden Platz?

    InformationsquelleAutor der Antwort Matthew

  2. 0

    Außer Breite des Containers, die definiert werden können, in %, hier ist eine Lösung.
    Der einzige Riss, der gearbeitet wurde, putting-container backgroud als Kind.

    sonst die Letzte Bedingung ist wirklich schwer zu erreichen 🙂 einfach Nur Wahr.

    Hier ist der fiddle-link

    Breite fiddle

    Hier ist der css - 

    .container {
width: 100%;
overflow:hidden;
whitespace:nowrap;
max-width:100%;
    background-color:red;
}
.left {
    width:auto;
    background:red;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    -ms-text-overflow:ellipsis;
    float: left;
    position:absolute;
    max-width:inherit;
}
.right {
    background:yellow;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    -ms-text-overflow:ellipsis;
    text-align: right;
    width:auto;
    float:right;
}

    Sehen, wenn es passt . Letzten Zustand wirklich schwer, wenn einige von Ihnen hat eine andere Lösung, um das Letzte Bild, das Sie eingefügt, dann bitte teilen 🙂

    InformationsquelleAutor der Antwort Anobik

Schreibe einen Kommentar