Content nebeneinander in mehrspaltiges Raster einpflegen

Hallo zusammen.

Ich bin noch relativ neu im Umgang mit Wordpress und bräuchte mal Hilfe....

Das folgende 12-spaltiges Raster habe ich mit CSS gebaut:

.span-1-of-12 {width: 8.33%;}
.span-2-of-12 { width: 16.67%;}
.
.
usw.
.
.span-12-of-12 {width: 100%;}

Nun möchte ich z.B. 3 Bilder nebeneinander einpflegen, jedes in eine eigene Spalte.

Der Loop in meinem Fall, müsste eigentlich so aussehen: (stark vereinfacht)

<?php if(have_posts()) : ?>
<?php while(have_posts()) : the_post(); ?>
  
<div class="span-4-of-12">


 <?php the_content(); ?>


</div>


<div class="span-4-of-12">


 <?php the_content(); ?>


</div>


<div class="span-4-of-12">


 <?php the_content(); ?>


</div>
   
<?php endwhile; ?>
<?php endif; ?>

Das ist natürlich falsch, da es hier nur einen Div Container mitsamt Inhalt geben darf. Außerdem würde in dem Fall dreimal des gleiche angezeigt werden. Aber wie kann ich das sonst machen, damit ich am Ende auf meine 12 Spalten komme und der Content nebeneinander angezeigt wird?

Zitat von Gsi

Da hast du wohl ein paar Denkfehler drin ;-)

Dein 1. DIV wäre 8,33% breit, und dein 12. DIV 100%???

Ja. Und wo ist da jetzt der Denkfehler?

Zitat

"width" bezieht sich auf die Bildschirmbreite, womit das letzte DIV die den gesamten Bildschirm ausfüllen würde ;-)

Richtig. Aber nur, wenn es kein Elternelement gibt. Das spielt aber für meine Frage keine Rolle.

Zitat

Selbst wenn du nur 1 DIV mit 8,33% Breite (12x) nehmen würdest, ist es höchstwahrscheinlich, dass es dir das div-Layout komplett zerbombt, da du nicht weißt, was deine Besucher für eine Bildschirmauflösung haben, welche Browsereinstellungen, usw...

12 x 8,33% = 99,96 (<100%)

Da zerbombt nichts. Im Gegenteil: Das Layout hält bombenfest. Und die Bildschirmauflösung sowie die Browsereinstellung hat mit relativen Größen wie Prozent wirklich garnichts zu tun.

Zitat

Du müsstest eine Wrapper-Div um den Loop herumziehen mit Mindestbreite min-width, und darin eine linksgefloatete Liste mit Listenpunkten, die 12x zusammen weniger als die Breite des Wrapper-Divs haben, sodass die Liste automatisch nach 12 Fotos umbricht. Und in den Loop kommt dann nur 1 Listenpunkt rein:

Wie gesagt, ein Elternelement bringt mich nicht weiter. Und gefloatet sind die Objekte ohnehin...

Wie auch immer. Inszwischen kann ich mir die Antwort auf meine Frage auch selbst geben: Man verwendet entsprechenden HTML Code im CMS, so dass die Inhalte in die dafür vorgeshenen Spalten rutschen.

Will man beispielsweise 3 Spalten auf Basis eines 12-spaltigen Layouts befüllen, stellt man im CMS den jeweiligen HTML Code voran bzw. nach:

<div class="span-4-of-12">
Lorem Ipsum bla bla
</div>


<div class="span-4-of-12">
Bild
</div>


<div class="span-4-of-12">
Video
</div>