清單項目定位，因爲它是在圖片

任何人都可以請幫助我瞭解如何定位以下佈局？這似乎很簡單。 enter image description here 清單項目定位，因爲它是在圖片

我有這樣的代碼：

<!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>

由於列表項的IMG下顯示的結果。但是我需要讓它們像圖片中所示的那樣。

由於提前，

來源

2012-04-03 Karine

如果您使用的是jQuery，那麼[Masonry]（http://masonry.desandro.com/）值得一看。否則，爲什麼不把它們放在桌子上？ – Bojangles 2012-04-03 23:02:08

我不使用jQuery。表格應該可以正常工作，但我想了解爲什麼我的代碼不起作用，而不僅僅是爲了解決此刻的問題。 – Karine 2012-04-03 23:06:30

你需要採取float風格你的ul類：

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

的float在ul導致整個列表作爲浮動一種大元素，這迫使其低於img。

來源

2012-04-03 23:04:58 Pete

你必須刪除float：left;從#big_img和UL

來源

2012-04-03 23:06:57 michaeltintiuc

這接近你想要什麼：（你沒有使用列表）

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

來源

2012-04-03 23:08:40

清單項目定位，因爲它是在圖片

回答

相關問題