Question

任何人都可以帮助我了解如何定位以下布局？这看起来很简单。 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下。但我需要它们，如图所示。

提前致谢，

Answer 1

您需要从float班级中取出ul样式：

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

float中的ul导致整个列表成为要浮动的一个大元素，这会将其强制降低到img以下。

Answer 2

你必须删除float：left;来自#big_img和ul

Answer 3

这看起来很接近你想要的东西:(你不必使用列表）

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

列出项目在图片中的定位

3 个答案: