css: textbloecke untereinander stapeln?

Beitrag von **nerd** » 04.04.2010, 02:34

Hallo,

ich habe hier eine liste mit kurzen texten. diese will ich in div containern (width immer gleich, height je nach textlaenge) spaltenweise anordnen. wie geht sowas? wenn ich meine divs alle mit display:block und float:left formatiere dann werden diese bloecke allen zeilenweise angeordnet, wobei sich die zeilenhoehe dann jedesmal nach dem groessten block richtet, womit bei den kuerzeren bloecken dann immer ein abstand zur naechsten zeile bleibt (sieht aus wie ne tabelle).

jemand ne idee wie ich den spalteneffekt hinbekomme?

von **Anzeige von ABAKUS** »

Beitrag von **Mork vom Ork** » 04.04.2010, 09:11

nerd hat geschrieben:div-containern (width immer gleich, height je nach textlaenge) spaltenweise anordnen. wie geht sowas? wenn ich meine divs alle mit display:block und float:left formatiere dann werden diese bloecke allen zeilenweise angeordnet

Jetzt mal abgesehen davon, dass display:block für <div>-Elemente sinnlos ist, weil es sich bereits um Blockelemente handelt: Was meinst du mit zeilen- und spaltenweise bzw. was stört dich daran?

float bewirkt einen Umlauf durch den nachfolgenden Inhalt, dementsprechend stehen die Elemente – soweit Platz ist – nebeneinander, ein völlig normales Verhalten. Ohne float erscheinen Blockelemente untereinander, das ist sozusagen noch normaler. Beides willst du offenbar nicht haben, einerseits hast du float gesetzt, um die normale, vertikale Anordnung zu verhindern (obwohl du dem Betreff nach die Blöcke doch untereinander haben willst), aber andererseits magst du offenbar auch nicht die durch dein float verursachte horizontale Anordnung (warum setzt du dann float?).

Wo ist das Problem? Beispielcode (ein funktionierender!) wäre auch nicht schlecht, um zu sehen, was du überhaupt anstellst.

Beitrag von **sx06050** » 04.04.2010, 09:29

jup, was willst jetzt überhaupt machen?
Float ja oder doch ned?
Wilslt zum Beispiel sowas da?
https://www.der-banker.de/Kredite.html

von **Anzeige von ABAKUS** »

SEO Consulting bei ABAKUS Internet Marketing
Erfahrung seit 2002

persönliche Betreuung
individuelle Beratung
kompetente Umsetzung

Jetzt anfragen: 0511 / 300325-0.

Beitrag von **catcat** » 04.04.2010, 11:03

Meinst Du sowas?

CSS:

Code: Alles auswählen

/* All */
.col3-set &#123; clear&#58;both; &#125;

/* Col3 */
.col3-set .col-1, .col3-set .col-2, .col3-set .col-3 &#123; float&#58;left; width&#58;31.3%; &#125;
.col3-set .col-1, .col3-set .col-2 &#123; margin-right&#58;3%; &#125;

Kot:

Code: Alles auswählen

<div class="col3-set">
<div class="col-1">
<p>text spalte 1</p>
</div>

<div class="col-2">
<p>text spalte 2</p>
</div>

<div class="col-3">
<p>text spalte 3</p>
</div>
</div>

Beitrag von **nerd** » 05.04.2010, 00:32

im moment siehts so aus:
https://imgur.com/3QYbt

ich wollte es aber so wie z.b. auf https://zurich.de.craigslist.ch/ haben - die verwenden da allerdings tabellen.

werde wohl 3 divs mit fester width als spalten anlegen muessen und dann meine textbloecke da reinsortieren:

Code: Alles auswählen

<div>
<div id="spalte1">
<p>text 1</p>
<p>text 2</p>
<p>text 3</p>
<p>text 4</p>
</div>
<div id="spalte2">
<p>text 1</p>
<p>text 2</p>
<p>text 3</p>
<p>text 4</p>
</div>
<div id="spalte3">
<p>text 1</p>
<p>text 2</p>
</div>
</div>

Beitrag von **e-fee** » 05.04.2010, 02:16

Hmm ja, das scheint mir auch die richtige Lösung zu sein, wenn Du das erreichen willst, was die haben. Der Mittelteil da sind übrigens auch Divs mit Listen drin, keine Tabellen. Tipp: man kann sich den Quellcode ja auch mal angucken. Auch die CSS-Datei.

Die spielen ja ein wenig mit dem Charme des hobbymäßig Zusammengebastelten, aber der Code ist valides HTML. Trotzdem haben die an einigen Stellen ja einen üblen Overflow, optisch sicher nicht das Gelbe vom Ei.

Beitrag von **sx06050** » 05.04.2010, 09:31

würd mit meiner Vorgeschlagenen Lösung ebenfalls gehen.
Im CSS halt noch das rauswerfen, anpassen, was du halt nicht brauchst.

CSS:
div#wrapper3 {
width: 600px;
margin: 0 auto;
border: 0px solid #b8b8b8;
}

div#leftCol3 {
float: left;
width: 190px;
background: #e2e2e2;
-moz-box-shadow: 5px 5px 8px #818181;
-webkit-box-shadow: 5px 5px 8px #818181;
box-shadow: 5px 5px 8px #818181;
-ms-filter:"progid:DXImageTransform.Microsoft.DropShadow(color=#818181, offx=2, offy=2)";
filter:progid:DXImageTransform.Microsoft.DropShadow(color=#818181, offx=2, offy=2);

}

div#rightCol3 {
float: right;
width: 190px;
background: #e2e2e2;
border-radius: 5px 5px 8px #818181;
-moz-box-shadow: 5px 5px 8px #818181;
-moz-border-radius-topright: 25px;
-moz-border-radius-bottomright: 25px;
-webkit-border-top-right-radius: 25px;
-webkit-border-bottom-right-radius: 25px;
-webkit-box-shadow: 5px 5px 8px #818181;
box-shadow: 5px 5px 8px #818181;
-ms-filter:"progid:DXImageTransform.Microsoft.DropShadow(color=#818181, offx=2, offy=2)";
filter:progid:DXImageTransform.Microsoft.DropShadow(color=#818181, offx=2, offy=2);
}

div#centerCol3 {
background: #e2e2e2;
width: 190px;
margin: 0 205px;
-moz-box-shadow: 5px 5px 8px #818181;
-webkit-box-shadow: 5px 5px 8px #818181;
box-shadow: 5px 5px 8px #818181;
-ms-filter:"progid:DXImageTransform.Microsoft.DropShadow(color=#818181, offx=2, offy=2)";
filter:progid:DXImageTransform.Microsoft.DropShadow(color=#818181, offx=2, offy=2);
}

/* clearfix zum Aufheben der Floatumgebung */

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

----------------------------------

Html ist eigentlich selbst erklärend:
Hier mal kurz angerissen

<div class="clearfix" id="wrapper3">
<div id="leftCol3">........</div>
<div id="centerCol3">........</div>
<div id="rightCol3">........</div>
</div>