✔ Divs ausrichten

Status
Nicht offen für weitere Antworten.
hagbard_celine

hagbard_celine

Mitglied
Ich will eine List machen, in der jeder Eintrag ein Div ist, der wiederum mehrere Divs beinhaltet, die nebeneinander ausgerichtet sind.

Der Grüne Div soll so sein wie er jetzt ist, der Rot und der Blaue soll neben den Grünen, so wie in der Grafik Grau eingezeichnet.

HTML: 
<style>
.ListItem { position:relative; margin:5px; padding:5px; border: 1px solid #EACD00; }
.ListItemThumbBox { position:relative; width:150px; height:120px; border: 1px solid #00FF00; }
.ListItemThumb { cursor:pointer; }
.ListItemTitleBox { position:relative; border: 1px solid #FF0000; }
.ListItemTextBox { position:relative; border: 1px solid #0000FF; }
</style>

HTML: 
<div id="MovieList" style="border: 1px solid rgb(0, 0, 0); position: absolute; top: 32px; left: 446px; width: 500px; height: 500px;">
	<div class="ListItem">
		<div class="ListItemThumbBox">
			<img src="http://img.youtube.com/vi/1URzkk-oa28/2.jpg" class="ListItemThumb"></div>
		<div class="ListItemTitleBox">
			Berlin wall fall @ Potsdamer Platz 1989 in Berlin</div>
		<div class="ListItemTextBox">
			Freundliche Leihgabe Aufnahmen vom 12 November 1989</div>
	</div>
	<div class="ListItem">
		<div class="ListItemThumbBox">
			<img src="http://img.youtube.com/vi/EcFPPIkdtYQ/2.jpg" class="ListItemThumb"></div>
		<div class="ListItemTitleBox">
			Berlin Wall Fall (Wonder) 1989 Music Video</div>
		<div class="ListItemTextBox">
			freundliche Leihgabe: a footage of pre wall fall and wall fall pics 
			from 1986 1989 to Jan 1 1990 as Video: Wunder geschehen = wonder could 
			happen</div>
	</div>
	<div class="ListItem">
		<div class="ListItemThumbBox">
			<img src="http://img.youtube.com/vi/hrPJYF2GzIs/2.jpg" class="ListItemThumb"></div>
		<div class="ListItemTitleBox">
			Tear Down the Wall</div>
		<div class="ListItemTextBox">
			1989 rock music video documenting the historic fall of the Berlin Wall. 
			This Bellaphon Records hit single charted in Germany &amp;amp; Austria in 
			November of 1989 as the Berlin Wall came down. Written &amp;amp; produced 
			by Larry Dunn.</div>
	</div>
</div>
 

Anhänge

  • Unbenannt.JPG
    Unbenannt.JPG
    46,7 KB · Aufrufe: 72
Zieh die „ListItemThumbBox“-Elemente mittels float:left links aus dem normalen Fluss. Dazu musst du den „ListItem“-Elemeten aber noch eine Mindesthöhe geben.
 
Hi,

arbeite hierfür mit der float-Eigenschaft:

Code: 
.ListItem { position:relative; margin:5px; padding:5px; border: 1px solid #EACD00; }
.ListItemThumbBox { float:left; position:relative; width:150px; height:120px; border: 1px solid #00FF00; }
.ListItemThumb { cursor:pointer; }
.ListItemTitleBox { margin-left:152px; position:relative; border: 1px solid #FF0000; ;}
.ListItemTextBox { margin-left:152px; position:relative; border: 1px solid #0000FF;}

.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 */
Code: 
<div id="MovieList" style="border: 1px solid rgb(0, 0, 0); position: absolute; top: 32px; left: 446px; width: 500px; height: 500px;">
        <div class="ListItem clearfix">
                <div class="ListItemThumbBox">
                        <img src="http://img.youtube.com/vi/1URzkk-oa28/2.jpg" class="ListItemThumb"></div>
                <div class="ListItemTitleBox">
                        Berlin wall fall @ Potsdamer Platz 1989 in Berlin</div>
                <div class="ListItemTextBox">
                        Freundliche Leihgabe Aufnahmen vom 12 November 1989</div>
        </div>
        <div class="ListItem clearfix">
                <div class="ListItemThumbBox">
                        <img src="http://img.youtube.com/vi/EcFPPIkdtYQ/2.jpg" class="ListItemThumb"></div>
                <div class="ListItemTitleBox">
                        Berlin Wall Fall (Wonder) 1989 Music Video</div>
                <div class="ListItemTextBox">
                        freundliche Leihgabe: a footage of pre wall fall and wall fall pics
                        from 1986 1989 to Jan 1 1990 as Video: Wunder geschehen = wonder could
                        happen</div>
        </div>
        <div class="ListItem clearfix">
                <div class="ListItemThumbBox">
                        <img src="http://img.youtube.com/vi/hrPJYF2GzIs/2.jpg" class="ListItemThumb"></div>
                <div class="ListItemTitleBox">
                        Tear Down the Wall</div>
                <div class="ListItemTextBox">
                        1989 rock music video documenting the historic fall of the Berlin Wall.
                        This Bellaphon Records hit single charted in Germany &amp;amp; Austria in
                        November of 1989 as the Berlin Wall came down. Written &amp;amp; produced
                        by Larry Dunn.</div>
        </div>
</div>
 
Die Lösung von Maik ist fast das was ich suche, kann man den Roten und den Grünen Div nicht so ausrichten das er sich immer an dem Grünen ausrichtet?
Denn wenn jetzt der Grüne, durch ein zu großes Bild, größer wird, überlagern sich die Divs.

Noch eine Frage, wie kann ich das Image in dem Div zentrieren ohne die Größe des Images zu kennen?
 
Verzichte auf die Breitenangabe für das DIV .ListItemThumbBox , sowie die relative Positierung der umfliessenden Boxen (.ListItemTitleBox, .ListItemTextBox), und deklariere für sie margin-left:auto anstelle von margin-left:152px.
 
Du hast vergessen, die relative Positionierung rauszunehmen.

Der Nachteil an dieser Methode ist aber nun, dass der Text des unteren Elements .ListItemTextBox bei längerem Inhalt unterhalb von .ListItemThumbBox linksbündig fortgesetzt wird, da kein fester linker Außenabstand definiert ist, sofern dieser Umbruch nicht erwünscht ist.
 
Wenn für die linke Box keine feste Breite vorliegt bzw. für die rechte Box kein entsprechender linker Außenabstand definiert wird, "unterwandert" die rechte Box die linke.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück