Wie Sie div-Element auf der Unterseite in Zelle

Möchte ich den Inhalt des zweiten div unten bündig mit der Bild.

HTML:

<table>
  <tr>
    <td>
      <div>
        <div style="float: left;">
          <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png"  style="max-width: 200px; max-height: 200px;"/>
        </div>
        <div style="float: right; vertical-align: bottom;">
          I want this text be on the same line as the bottom of the image
        </div>
      </div>
    </td>
  </tr>
</table>

InformationsquelleAutor Vitaly P | 2015-09-21
  1. 4

    Können Sie dies mit der table und table-cell Eigenschaften von Anzeige.

    HTML:

    <table>
  <tr>
    <td>
      <div style="display:table">
        <div style="display:table-cell">
          <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png"  style="max-width: 200px; max-height: 200px;"/>
        </div>
        <div style="vertical-align: bottom; display: table-cell">
          I want this text be on the same line as the bottom of the image
        </div>
      </div>
    </td>
  </tr>
</table>

    Obwohl ich würde vorschlagen, Sie tun das styling auf einer separaten CSS-Datei oder eingebettet werden, anstatt das hinzufügen von inline. Beispiel:

    CSS:

    .outer {
  display: table;
}

.inner {
  display: table-cell;
  vertical-align: bottom;
}

    HTML:

    <table>
  <tr>
    <td>
      <div class="outer">
        <div>
          <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png"  style="max-width: 200px; max-height: 200px;"/>
        </div>
        <div class="inner">
          I want this text be on the same line as the bottom of the image
        </div>
      </div>
    </td>
  </tr>
</table>

    Wenn Sie wollen, um den text an der Unterseite, aber auch zentriert, Sie können hinzufügen text-align: center.

    InformationsquelleAutor Chris
  2. 2

    Können Sie hinzufügen display: table-cell zu div Elemente innerhalb der Tabelle:

    CSS:

    table tbody tr td div div {
  display: table-cell;
}

    HTML:

    <table>
  <tr>
    <td>
      <div>
        <div>
          <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png" style="max-width: 200px; max-height: 200px;" />
        </div>
        <div style="vertical-align: bottom;">
          I want this text be on the same line as the bottom of the image
        </div>
      </div>
    </td>
  </tr>
</table>

    InformationsquelleAutor Alex Char
  3. 1

    Fügen Sie margin-top zu Ihrem zweiten div-und wird ausgerichtet, um der rechten unteren Ecke des Bildes

    <div style="float: right; vertical-align: bottom; margin-top:135px;">
          I want this text be on the same line as the bottom of the image
</div>
    InformationsquelleAutor Amar
  4. 0

    Bitte versuchen Sie dieses:

    HTML:

    <table>
  <tr>
    <td>
      <div style="display:table">
        <div style="display:table-cell">
          <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png"  style="max-width: 200px; max-height: 200px;"/>
        </div><br>
        <div style=" vertical-align: bottom;display: table-cell ">
          I want this text be on the same line as the bottom of the image
        </div>
      </div>
    </td>
  </tr>
</table>

    DEMO

    InformationsquelleAutor Ivin Raj
Schreibe einen Kommentar