Positionieren Sie zwei Blöcke auf der gleichen Linie

Habe ich diesen HTML-code:

<span class="left">
        <img class="avatar" src="image.jpg" />
</span>
<span class="right">
    Lorem ipsum dolor sit amet, nunc euismod nisl nam euismod, quis maecenas blandit ac, neque sed ut pulvinar, lectus sagittis sapien mauris per risus vel. Ligula sapien sed morbi cras tellus commodo. Rutrum mattis accumsan, hac sed praesent, neque tortor neque, commodo mauris sagittis turpis, faucibus sed ultrices tempor interdum. Lobortis assumenda nisl, posuere cras sit risus egestas bibendum nec, magna in, sed mattis pharetra felis nulla vitae aptent, in semper et...
</span>

Möchte ich, dass die beiden Blöcke positioniert sind, auf der gleichen Linie. Ich benutze diese CSS:

.right {
width: 250px;
background-color: orange;
float: left;
} 

.left {
width: 100px;
background-color: orange;
float: left;
}

Ist es gut, aber ich möchte, dass die Rechte Seite (text) ist nicht groß 250px, aber 100%. Wenn ich width:100%, wird der block nicht auf der gleichen Linie.

Wie kann ich dies tun?

  • versuchen Sie, verwenden Sie <table> oder <div>
  • 100% von was? was ist die Größe für Ihre Eltern?
  • 100% der Seite, möchte ich allen die Breite, ist auf der rechten Seite
InformationsquelleAutor Gabriele | 2010-11-08
  1. 2

    Hier ist meine Lösung für dein problem - stellen Sie die Breite auf der linken Seite Element, und die Marge auf das richtige Element. Das linke Element ist, Schwamm, das richtige Element nicht. Ich habe auch die Anzeige das richtige Element "block".

    .right {
    display: block;
    margin-left: 100px;
    width: auto;
    background-color: orange;
} 

.left {
    width: 100px;
    background-color: orange;
    float: left;
}
    InformationsquelleAutor Fenton
  2. 1

    Für die gefloateten Elemente, wenn Sie Sie verwenden möchten prozentuale breiten, Sie sollten berechnen Sie die Breite jedes: 

    .right {
width: 50%; /*or 45%*/
background-color: orange;
float: left;
} 

.left {
width: 50%; /*or 55%*/
background-color: orange;
float: left;
}

    Dann werden Sie die Anzeige auf der gleichen Linie.

    Auch, wenn es Ränder oder Polster, sollten Sie dies berücksichtigen bei der Berechnung der breiten als wenn Sie beide zu 50%, aber es ist ein margin von 10px, es wird immer noch Kraft, das nächste element auf eine neue Zeile.

    Machen die .right element berechnen Sie die Breite, die Sie benötigen, um Ihre Breite zu width: auto; - und counter-Marge der .left element: margin-left; 100px; (wo 100px ist gleich der .left elemtents Breite).

    Beispiel hier für Sie.

    InformationsquelleAutor Kyle
  3. 0

    löschen Sie die Breite für die richtige Klasse und den Schwimmer. Dadurch wird die richtige Klasse, um die Verbleibende Breite des übergeordneten Elements.

    .right {
    background-color: orange;
}
.left {
    width:250px;
    background-color: orange;
    float:left;
}

    Beispiel http://jsbin.com/ayaha3

    InformationsquelleAutor Sotiris
Schreibe einen Kommentar