列表中的图像不能正确浮动

不均匀的行（1,3,5等）首先应该有一个小的图像，并且宽一秒。偶数行（2,4,6,8等）首先应该具有宽的图像，并且应该具有较小的一秒。

我现在在第3行，无论出于何种原因我都无法将小图像向左移动。正如你在下面的图片中看到的，它漂浮在右边。

我的代码非常基本，Dreamweaver在其Split函数中正确显示它。

HTML：

<div id="portfolio-screen"></a> 
    <ul> 
      <li><img src="images/portfolio-jaar1.png" width="228"/></li> 
      <li><img src="images/portfolio-pr1_2.png" width="500"/></li> 
      <li><img src="images/portfolio-pr1_4.png" width="500"/></li> 
      <li><img src="images/portfolio-pvs1.png" width="228"/></li>  
      <li><img src="images/portfolio-jaar2.png" width="228"/></li> 
      <li><img src="images/portfolio-pr2_2.png" width="500"/></li> 
    </ul>     
</div>

CSS

#portfolio-screen  {margin-top: 8px; width: 768px; height: 602px; background-color:#37322d; overflow: auto;} 
#portfolio-screen li {margin-top: 8px; margin-left: 8px; float: left;}

出于某种原因，它是不允许张贴图片，所以我提供了一个链接到一个：http://oi51.tinypic.com/b63vkk.jpg

来源

2013-02-27 user2116085

你得到你的答案？ – Riskbreaker 2013-04-09 15:20:25

首先，你必须那里有一个破损的</a>。

其次，请确保您的unorder列表中有保证金和0

最后的填充，惹的jsfiddle：

http://jsfiddle.net/Riskbreaker/NT4DS/10/

代替花车尝试inline-block的

来源

2013-02-27 16:21:59 Riskbreaker

我编辑了JSfiddle，http://jsfiddle.net/NT4DS/7/ 但这里也是错误的。 – user2116085 2013-02-27 16:37:54

我在我的代码更新尝试：'inline-block' – Riskbreaker 2013-02-27 17:06:39

您可以尝试这样的事情 - 图像的CSS高度可以根据您的尺寸需求进行移除。

HTML

<div id="portfolio-screen"> 
<ul> 
    <li> 
     <img src="images/portfolio-jaar1.png" class="imgSmall" /> 
    </li> 
    <li> 
     <img src="images/portfolio-pr1_2.png" class="imgLarge" /> 
    </li> 
    <li> 
     <img src="images/portfolio-pr1_4.png" class="imgLarge" /> 
    </li> 
    <li> 
     <img src="images/portfolio-pvs1.png" class="imgSmall" /> 
    </li> 
    <li> 
     <img src="images/portfolio-jaar2.png" class="imgSmall" /> 
    </li> 
    <li> 
     <img src="images/portfolio-pr2_2.png" class="imgLarge" /> 
    </li> 
</ul> 
</div>

CSS：

img { 
height:20px; 
} 
.imgSmall { 
width:228px; 
} 
.imgLarge { 
width: 500px; 
} 
#portfolio-screen { 
margin: 0; 
padding: 0; 
width: 768px; 
height: 602px; 
background-color:#37322d; 
} 
#portfolio-screen ul { 
margin: 0; 
padding: 15px; 
width: 768px; 
} 
#portfolio-screen li { 
margin-top: 8px; 
margin-left: 8px; 
display: inline-block; 
} 
#portfolio-screen li:nth-child(odd) { 
margin:0; 
}

JS小提琴：http://jsfiddle.net/5qREV/

来源

2013-02-27 16:39:28 Biotox

谢谢，这确实工作。 http://jsfiddle.net/5qREV/2/ – user2116085 2013-02-27 16:43:04

好吧，事实证明，我可以保留任何代码，只需添加“img {height：144px;}” 这行就行。有趣的是，猜测出现了一些调整大小的问题（我的图片大于他们在网页上显示的大小） – user2116085 2013-02-27 17:07:45

请不要使用'width'属性，这对于CSS来说是最好的，并且将'alt'添加为W3C验证。这只是一个好习惯。 – Biotox 2013-02-27 17:34:01

列表中的图像不能正确浮动

回答

相关问题