画像内にあるように項目を配置する

誰でも次のレイアウトの配置方法を理解できますか？かなりシンプルなようです。 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の下に表示されます。しかし、私は写真のようにそれらを持っている必要があります。事前に

おかげで、あなたはあなたのulクラスのうち、floatスタイルを取る必要があり

出典

2012-04-03 Karine

jQueryを使用している場合、[Masonry]（http://masonry.desandro.com/）が一見価値があるかもしれません。それ以外の場合は、テーブルに入れないでください。 – Bojangles

jQueryは使用しません。テーブルは正常に動作するはずですが、私のコードが機能しない理由を理解したいだけでなく、現時点で問題を解決するためだけではありません。 – Karine

：

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

一つの大きな要素が浮かんされるようulでfloatは、リスト全体を引き起こしています、それは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

画像内にあるように項目を配置する

答えて

関連する問題