Bilder anhand der Tabelle ausrichten

-1

Wie würde ich vier Bilder (zwei quadratische Bilder und zwei rechteckige Bilder) mit einer Tabelle ausrichten? Sollte in etwa so aussehen: http://imgur.com/a/PdbZq Bilder anhand der Tabelle ausrichten

<table> 
 
    <tr> 
 
    <td> 
 
     <img src="http://i.imgur.com/B8jHVoB.png" /> 
 
    </td> 
 
    <td colspan="2"> 
 
     <img src="http://i.imgur.com/SXEsKuc.png" /> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td colspan="2"> 
 
     <img src="http://i.imgur.com/SXEsKuc.png" /> 
 
    </td> 
 
    <td> 
 
     <img src="http://i.imgur.com/B8jHVoB.png" /> 
 
    </td> 
 
    </tr> 
 
</table>

Quelle

2017-01-02 C_Z_

Können Sie uns ein Beispiel oder ein Bild von dem zeigen, wie es aussehen soll? Ihre Beschreibung der "zwei rechteckigen Bilder, die sich vertikal überlappen" ist schwer zu visualisieren, zumal sich die Tabellenzellen nicht überlappen sollen. –

Tabellen sind für Tabellendaten, nicht Layout. Verwenden Sie CSS. – j08691

CSS ist über 20 Jahre alt. Verwenden Sie keine Tabellen mehr für das Layout. – Quentin

Hat nicht viel Sinn machen, eine Tabelle zu verwenden, für das, was Sie wollen, nicht wahr? Eine Tabelle hat Zellen gleicher Größe in einer ganzen Spalte - was genau Sie nicht wollen. Eine CSS-Lösung:

<div style="white-space:nowrap;"> 
 
     <img src="http://i.imgur.com/B8jHVoB.png" /> 
 
     <img src="http://i.imgur.com/SXEsKuc.png" /> 
 
    </div> 
 
    <div style="white-space:nowrap;"> 
 
     <img src="http://i.imgur.com/SXEsKuc.png" /> 
 
     <img src="http://i.imgur.com/B8jHVoB.png" /> 
 
    </div>

Fast vergessen: keine Inline-Stil verwenden, stellen eine Klasse eine Reihe von Bildern zu halten, mit der white-space: no-Wrap als Attribut .

Quelle

2017-01-02 20:10:57 kabanus

Vielen Dank für die Tatsache, dass wirklich hilfreich –

Bilder anhand der Tabelle ausrichten

Antwort

Verwandte Themen