0

次のレイアウトの配置方法を理解するのを手伝ってもらえますか？とてもシンプルなようです。 ここに画像の説明を入力してください

私はこのコードを持っています：

<!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の下に表示されます。しかし、私はそれが写真に示されているようにそれらを持っている必要があります。

前もって感謝します、

4

3 に答える 3

2

クラスfloatからスタイルを取り除く必要があります。ul

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

float内のはul、リスト全体を1つの大きな要素としてフロートさせ、それを下に強制しますimg。

于 2012-04-03T23:04:58.103 に答える
0

フロートを削除する必要があります：左; #big_imgとulから

于 2012-04-03T23:06:57.833 に答える
0

これはあなたが望むものに近いように見えます:(リストを使用する必要はありません）

HTML：

​&lt;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>
​&lt;/div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS：

</ p> 

#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

于 2012-04-03T23:08:40.797 に答える