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;
}

floatin导致整个ul列表作为一个大元素浮动，这迫使它低于img.

于 2012-04-03T23:04:58.103 回答
0

您必须删除 float: left; 来自#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 回答