Layout: responsive Alternative zu einem Table

Sobini

Wie kann ich am Besten in einem Artikel ein Layout erstellen, das gleich Große Boxen hat.
Bild ist 450px x 450px neben dem Bild ist wenig Text, dieser sollte jedoch in einer Box mit der gleichen Größe wie das Bild sein - damit es gut aussieht.
Mit einem Table bekomme ich das gut hin: http://sample4.ganserdesign.com/index.php/en/alserstrasse

Aber ohne weiß ich nicht wie es am Besten geht.
Ich habe es mit css3 Columns versucht, aber die haben auch keine "fixed height" für den Text zugelassen.
Welche Ideen gibt es das umzusetzten?

Bin für jegliche Hilfe dankbar!

fabian

Hi!

Da ich noch Anfänger bin, kann ich Dir nur den Hinweis auf das widget Grid Stack von yootheme geben.

Ich wünsche Dir einen schönen Tag, Fabian

firstlady

Die einfachste Möglichkeit statt Tabelle - funktioniert allerdings nur, wenn dein Template es erlaubt, was ich nicht beurteilen kann.

Code

<div class="row-fluid">
<div class="span6">Bild</div>
<div class="span6">Text</div>
</div>
<div class="row-fluid">
<div class="span6">Text</div>
<div class="span6">Bild</div>
</div>

Die divs kannst du dann weiter gestalten, mit padding, background und so fort.

meernils

Bleib mit CSS dran. Das sollte mit dem Flexbox-Layout kein Problem sein. Erstelle eine Liste mit dem Bild als einen li-tag und den Text als weiteren Listenpunkt. Per CSS setzt du display der Liste (ul) auf flex. Das Alignment der beiden Listenpunkte (li) setzt du auf stretch.

Beispielhaft:

Code

<div class="meineliste"><ul><li>Bild</li><li>Text</li></ul></div>

Code

.meineliste ul {display:flex; flex-direction:row;flex-wrap:wrap;}
.meinelist li {align-items:stretch;}

So in etwa sollte das aussehen. Im responsive Design sollte die rechte Box dann nach unten rutschen.

LSG

https://wiki.selfhtml.org/wiki/CSS/Anwen…onsiv_gestalten ist ein Lösungsansatz oder halt das http://getbootstrap.com/css/