Listenelement Positionierung wie es auf dem Bild ist

Kann mir bitte jemand helfen, zu verstehen, wie das folgende Layout zu positionieren? Es scheint ziemlich einfach zu sein. enter image description here Listenelement Positionierung wie es auf dem Bild ist

Ich habe diesen Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<style type="text/css"> 

#container 
{ 
    width:730px; 
    margin:0 auto; 
    } 
#big_img 
{ 
    width:270px; 
    height:270px; 
    float:left; 
} 
ul 
{ 
    list-style-type:none; 
    float:left; 
    padding:0; 
} 
ul li 
{ 
    display:inline; 
    float:left; 
    margin-right:9px; 
    margin-top:0; 
    margin-bottom:9px; 
} 
li a img 
{ 
    width:130px; 
    height:130px; 
    border:1px solid #dcd9d9; 
} 

</style> 


</head> 

<body> 

<div id="container"> 
    <div id="big_img"><img src="images/new-cat.jpg"/></div> 
    <ul> 
    <li><img src="images/ballpools.jpg"/></li> 
    <li><img src="images/ballpools.jpg"/></li> 
    <li><img src="images/ballpools.jpg"/></li> 
    <li><img src="images/ballpools.jpg"/></li> 
    <li><img src="images/ballpools.jpg"/></li> 
    <li><img src="images/ballpools.jpg"/></li> 
    <li><img src="images/ballpools.jpg"/></li> 
    <li><img src="images/ballpools.jpg"/></li> 
    <li><img src="images/ballpools.jpg"/></li> 
    <li><img src="images/ballpools.jpg"/></li> 
    <li><img src="images/ballpools.jpg"/></li> 
    <li><img src="images/ballpools.jpg"/></li>   
    </ul> 
</div> 
</body> 
</html>

Als Folge der Listeneinträge unter dem IMG angezeigt werden. Aber ich muss sie haben, wie es auf dem Bild gezeigt wird.

Vielen Dank im Voraus,

Quelle

2012-04-03 Karine

Wenn Sie jQuery verwenden, kann [Mauerwerk] (http://maurryon.desandro.com/) einen Blick wert sein. Ansonsten, warum nicht in einen Tisch legen? – Bojangles

Ich benutze jQuery nicht. Tabelle sollte gut funktionieren, aber ich möchte den Grund verstehen, warum mein Code nicht funktioniert und nicht nur, um das Problem im Moment zu lösen. – Karine

Sie benötigen den float Stil aus Ihrer ul Klasse nehmen:

ul { 
    list-style-type:none; 
    padding:0; 
}

Die float in den ul die ganze Liste verursacht als ein großes Element schwebte werden, was zwingt es unter die img.

Quelle

2012-04-03 23:04:58 Pete

Sie müssen Schwimmer entfernen: links; von #big_img und ul

Quelle

2012-04-03 23:06:57 michaeltintiuc

Das sieht der Nähe zu dem, was Sie wollen: (Sie müssen keine Listen verwenden)

HTML:

<div id="container"> 
    <div id="bigimage"></div> 
    <div class="smallimage"></div> 
    <div class="smallimage"></div> 
    <div class="smallimage"></div> 
    <div class="smallimage"></div> 
    <div class="smallimage"></div> 
    <div class="smallimage"></div> 
    <div class="smallimage"></div> 
    <div class="smallimage"></div> 
    <div class="smallimage"></div> 
    <div class="smallimage"></div> 
    <div class="smallimage"></div> 
</div>

CSS:

#container { 
    width:730px; 
} 

#bigimage { 
    width:270px; 
    height:270px; 
    background-color: red; 
    float: left; 
    margin: 7px; 
} 

.smallimage { 
    border:1px solid green; 
    width:130px; 
    height:130px; 
    float: left; 
    margin: 5px; 
}

jsFiddle here

Quelle

2012-04-03 23:08:40

Listenelement Positionierung wie es auf dem Bild ist

Antwort

Verwandte Themen