Richten Sie das Bild links vom Text in derselben Zeile aus - Twitter Bootstrap

Derzeit habe ich einen Absatz mit überschrift und ein Bild zu seiner rechten, auf der gleichen Linie:

<div class="paragraphs">
  <div class="row">
    <div class="span4">
      <div class="content-heading"><h3>Experience &nbsp </h3><img src="../site/img/success32.png"/></div>
      <p>Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
    </div>
  </div>
</div>

Dies funktioniert sehr gut - die content-überschrift und das Bild auf der gleichen Linie. Allerdings, wenn ich das Bild vor dem Inhalt-überschrift div, Sie sind nicht mehr auf der gleichen Linie. Dies ist, was ich erreichen will - Bild-content-überschrift - auf der gleichen Linie.

InformationsquelleAutor der Frage MattSull | 2012-08-10

  1. 38

    Können Sie schweben:

    <div class="paragraphs">
  <div class="row">
    <div class="span4">
      <img style="float:left" src="../site/img/success32.png"/>
      <div class="content-heading"><h3>Experience &nbsp </h3></div>
      <p style="clear:both">Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
    </div>
  </div>
</div>

    Wenn Sie möchten, die folgenden <p> bleiben in der gleichen Zeile zu entfernen, entfernen seine

    style="clear:both"

    aber dann sollten Sie

    <div style="clear:both"></div>

    danach.

    InformationsquelleAutor der Antwort Oriol

  2. 82

    Verwendung von Twitter Bootstrap-Klassen kann die beste Wahl sein :

    • pull-left macht ein element floating Links
    • clearfix ermöglicht das element zu enthalten bewegliche Elemente (wenn Sie nicht bereits über eine andere Klasse)
    <div class="paragraphs">
  <div class="row">
    <div class="span4">
      <div class="clearfix content-heading">
          <img class="pull-left" src="../site/img/success32.png"/>
          <h3>Experience &nbsp </h3>
      </div>
      <p>Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
    </div>
  </div>
</div>

    InformationsquelleAutor der Antwort Sherbrow

  3. 38

    Beginnend mit Bootstrap v3.3.0 Sie können .media-left und .media-body

    <div class="media">
    <span class="media-left">
        <img src="../site/img/success32.png" alt="...">
    </span>
    <div class="media-body">
        <h3 class="media-heading">Experience</h3>
        ...
    </div>
</div>

    Dokumentation: https://getbootstrap.com/docs/3.3/components/#media

    InformationsquelleAutor der Antwort maxwilms

  4. 8

    Für Bootstrap-3. 

    <div class="paragraphs">
  <div class="row">
    <div class="col-md-4">
      <div class="content-heading clearfix media">
           <h3>Experience &nbsp </h3>
           <img class="pull-left" src="../site/img/success32.png"/>
      </div>
      <p>Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
    </div>
  </div>
</div>

    InformationsquelleAutor der Antwort Dilip Kumar

  5. 3

    Ich würde die Verwendung von Bootstrap grid das gewünschte Ergebnis zu erzielen. Class="img-responsive" funktioniert gut. So etwas wie:

        <div class="container-fluid">
        <div class="row">
            <div class="col-md-3"><img src="./pictures/placeholder.jpg" class="img-responsive" alt="Some picture" width="410" height="307"></div>
            <div class="col-md-9"><h1>Heading</h1><p>Your Information.</p></div>
        </div>
    </div>

    InformationsquelleAutor der Antwort Dave

Schreibe einen Kommentar