Jak uzyskać efekt dwóch kolumn

Witam,

Mam wielka prośbę, proszę o wytlumaczenie mi, w jaki sposób, mogę stworzyć widok dwukolumnowy, tak aby wyświetlały się na zmianę, czyli następny wpis w zaznaczonym na czerwono miejscu a nie pod spodem.

HBuju.png

spróbuj :nth-child(2) {float:left} dla elementu zawierającego ten wpis

Przepraszam że zapytam ale gdzie w kodzie CSS mam to wkleić, jeżeli zawartość wpisu opisana jest tak:

/* story structure */

h2.story-title {font-size:13px;font-weight:420;margin:0;border:none;margin:0;padding-left:2px;letter-spacing:normal;color:#333;font-weight:700;text-decoration: none;text-shadow:0px 1px white;margin-top: 5px; }

h2.story-title a:link, h2.story-title a:visited {color:#191919;font-weight:700;text-decoration: none;}

h2.story-title a:hover {color:#00A5F0; text-decoration: none;}


.story-row{position:relative;clear:left;width:50%;margin-bottom: 12px;background:#FFF;border-radius: 3px;border:1px solid #CCC;}

[u].story-row:nth-child(2) {float:left}[/u]^?^

.story-left-margin {margin-left:0px;padding:0 0 0 5px;}

.storycontent {font-size:12px;line-height:18px;margin:0;z-index:0;padding:0;color:#333;text-shadow:0px 1px white}

 a.more{padding-left:5px;white-space:nowrap;text-decoration:none;color:#222;}

 a.source-link, a.source-link a:visited{padding-left:2px;font-size:11px;text-decoration:none;color: #FF4141}

Jeśli nie działa bez kodu strony będzie ciężko. Ew daj adres jak masz na ftp :slight_smile:

Oczywiśce bardzo proszę adres http://networkrumors.com

Ewentualnie możesz dodać float: left dla każdego div’a i oczywiście dodaj nieco marginesu z prawej (margin-right) i zmniejsz width tak by Ci się te div’y pomieściły. Nie zapomnij o usunięciu clear: left.

Zrobiłem float: left jednak teraz wpisy wyświetlają sie tylko po prawej stronie. Gdyby ktoś mógł mi po kolei wytłumaczyć jak mam to zrobić byłbym bardzo wdzięczny. Pozdrawiam

Zrób tak:

.main-content { width: 972px; }

.story-row { width: 470px; float: left; margin-right: 14px }

PS. Polecam używać FireBug do FF

A zrobiłeś jak to opisałem? Ja się tą stroną co dałeś w firebugu pobawiłem i mi zadziałało bez problemu, no bo wyjścia nie miało :-D!

Super, dzięki bardzo mi to pomogło, jednak mam jeszcze jedno pytanie. Czy można w jakis sposób wyeliminować te luki które pozostały po lewej stronie, tak aby wpisy były ułożone równo do siebie. Lewa do prawej.

Pozdrawiam

to w takim wypadku ja bym to zrobil albo na tabelkach albo po kazdym div story-row dodał

i w css .clear { clear: both; }

Dodane 03.08.2012 (Pt) 15:27

jednak z clear to nie zadziala. musisz przerobic na tabelke

Chyba żartujesz…

nie, całkiem poważnie pisze

Jeśli dobrze rozumiem, to ustaw div’om na sztywniaka height, np. na 200px.

i ogranicz ilość znaków w każdym wpisie zeby kiedyś tekst nie wyjezdzał

ewentualnie dać regułę overflow: hidden i text-overflow: ellipsis; lub text-overflow: ellipsis-word;

http://www.css3.info/preview/text-overflow/

Super, dziękuję wszystkich za pomoc :slight_smile: teraz na spokojnie zastanowię się nad ustawieniem wyświetlania ilości tekstu pod wpisem. Pozdrawiam serdecznie :smiley: