Divs float: left (Mit Bild)

html.de-Forum HTML, XHTML & CSS
1

Ich versuche mittels CSS folgendes hinzubekommen

http://img165.imageshack.us/img165/1984/csswillhq2.gif

Ich generiere einfach eine Menge Divs hintereinander und diese sollen werden anhand der Parent Element breite immer so umgebrochen dass zwei nebeneinander passen. Was ich jedoch nicht hinbekomme, ist, dass die neue Zeile sich so nah wie möglich an das obere Element ausrichtet (siehe links)
Mit dem unteren Code erreiche ich nur, dass was rechts zu sehen ist, (das leicht graue ist zuviel, bekomm ich aber nicht weg)

<div class="onebud">
			<div class="image">
				<a href="#"><img src="bild.jpg" alt="" /></a>
			</div>
			<div class="text">
				...
			</div> 
	    </div>

(Von dem Div beliebig viele, wobei das Bild letztendlich die Höhe angibt.

Css:

.onebud {
  	
	width: 250px;
	background: #ededed;
	float: left;
	margin-right: 10px;
	margin-bottom: 20px;
  }

Danke schonmal :slight_smile:

2

du erzeugst 2 div die du nebeneinander floatest, und in den 2 div kannst du dann deine gewollten divs links und rechts jeweils aufteilen und getrennt floaten und solltest dann das gewollte ergebnis erreichen.

3

so vllt? (einfach in ne datei mit .htm - endung kopieren…rahmen kannste ja noch wegmachen, ist nur zur anschauung)

[code]

    #over     {
        height: 100%;
        width: 400px;
        margin: 10px auto;
        border: #000000 2px solid;
        }

    #side_links {
          float: left;
          margin-left: 30px;
          width: 150px;
          height: 100%;
        }


    .links1 {
        display: block; 
        height: 100px; 
        margin-top: 20px;
        border: #000000 2px solid;
        }

    .links2 {
        display: block; 
        height: 100px; 
        margin-top: 20px;
        border: #000000 2px solid;
        }

    .links3 {
        display: block; 
        height: 100px; 
        margin-top: 20px;
        border: #000000 2px solid;
        }

    #side_rechts {
          float: right;
          margin-right: 30px;
          width: 150px;
          height: 100%;
        }


    .rechts1 {
        display: block; 
        height: 100px; 
        margin-top: 20px;
        border: #000000 2px solid;
        }

    .rechts2 {
        display: block; 
        height: 100px; 
        margin-top: 20px;
        border: #000000 2px solid;
        }

    .rechts3 {
        display: block; 
        height: 100px; 
        margin-top: 20px;
        border: #000000 2px solid;
        }

<div id="side_links">
    <p class="links1">      </p>
    <p class="links2">      </p>
    <p class="links3">      </p>        
</div>


<div id="side_rechts">
    <p class="rechts1">      </p>
    <p class="rechts1">      </p>
    <p class="rechts1">      </p>
</div>
[/code]

habe jetzt nur jeweils 3 container links und 3 rechts gemacht. Wenn du mehr, wie in deinen bild haben willst, weißte ja sicherlich wie dus anstellst :wink:

grüßli…

4

An eine deratige Lösung habe ich bereits gedacht, danke euch :slight_smile:
Es gibt keine wirkliche Alternative, oder? Dafür muss dann eine Logik die Elemente in Links und Rechts aufteilen. Ich habe gehoft es gibt einen Weg, einfach Objekte zu erzeugen und CSS könnte dies mit meiner oben beschriebenen Struktur erreichen

5

Das wäre meiner meinung nach am leichtesten…bzw ist mir sofort eingefallen…wenn du es flexibel machen willst müsste es ca so aussehen:

[code]

    #over     {
        height: 50em;
        width: 50em;
        margin: 10px auto;
        border: #000000 2px solid;
        }

    #side_links {
          float: left;
          margin-left: 15px;
          width: 15em;
          height: 25em;
        border: #000000 2px solid;
        }


    .links1 {
        display: block; 
        height: 5em; 
        margin-top: 20px;
        border: #000000 2px solid;
        }

    .links2 {
        display: block; 
        height: 5em; 
        margin-top: 20px;
        border: #000000 2px solid;
        }

    .links3 {
        display: block; 
        height: 5em; 
        margin-top: 20px;
        border: #000000 2px solid;
        }

    #side_rechts {
          float: right;
          margin-right: 30px;
          width: 15em;
          height: 25em;
        border: #000000 2px solid;
        }


    .rechts1 {
        display: block; 
        height: 5em; 
        margin-top: 20px;
        border: #000000 2px solid;
        }

    .rechts2 {
        display: block; 
        height:5em; 
        margin-top: 20px;
        border: #000000 2px solid;
        }

    .rechts3 {
        display: block; 
        height: 5em; 
        margin-top: 20px;
        border: #000000 2px solid;
        }

<div id="side_links">
    <p class="links1"> test <br /> test <br /> test <br />     </p>
    <p class="links2">      </p>
    <p class="links3">      </p>        
</div>


<div id="side_rechts">
    <p class="rechts1">      </p>
    <p class="rechts1">      </p>
    <p class="rechts1">      </p>
</div>
[/code]

hoffe das stimmt!?

6

Es ist einfach die Reihenfolge, in der die Blöcke im HTML-Code stehen. Die der linken Spalte müssten alle gefloatet werden und zuerst im HTML-Code stehen. Dann bekommst Du das gewünschte Ergebnis.
Wenn die Anzahl der Blöcke variabel ist, die Inhalte vom Server generiert werden, oder so etwas, dann müsstest Du die Daten der Blöcke halt erst alle vom Server holen, dann entscheiden, welche davon links und welche rechts hinkommen und dann entsprechenden HTML-Code generieren. Das würde schon irgendwie gehen.