Question

我正在尝试使用一组水平放置在div的底部的小图标图像来渲染div。

当总图像行的宽度小于包含div的宽度时，没有问题。我正在使用这样的代码：

<div class="main-div" style="position: absolute; width: 700px; height: 600px">
Text text text ...
  <div class="icon-tray">
    <img src="...">
    <img src="...">
    ...
  </div>
</div>

使用“icon-tray”的CSS如下：

div.icon-tray {
  position: absolute;
  bottom: 0;
}

“main-div”容器的位置具有固定的宽度和高度;顶部的文本和底部的图标之间有很多空格。

上面的CSS将主要div底部的“图标 - 托盘”图像放在一行中，这正是我想要的。

然而，当图标数量不仅仅适用于一行时，我遇到了问题。当发生这种情况时，渲染的主div看起来像这样：

--------------
|text text text ...
|
|
|
|X X X X X X X
|X X
--------------

“icon-tray”div从TOP开始逐行排列图像;而我希望这些图标被视为从底部向上“填满”主要div，如下所示：

-------------
|text text text ...
|
|
|
|X X
|X X X X X X X
--------------

我不知道如何解决这个问题。如何从下往上显示图标？

感谢您的帮助！

Answer 1

似乎有点模糊你想要做的事情。

这是你想要动态的东西吗？如果是这样的话，你应该使用一些php来显示要显示的图像数量，除以每行的数量，然后取出余数并先将它吐出来......反正就像那样。

如果它不是动态的，只是直接向上html，将更容易只是abs定位每个图像（考虑到你的容器div有一个设置的宽度和高度无论如何？）

Answer 2

我认为你不得不求助于Javascript。我现在无法想象用CSS做任何事情。

以下是jQuery：

的功能

 $(document).ready(function() {
    var total = $('.icon-tray > img').size(),
        maxperrow = 7,  //edit this to the max. imgs per row
        breakafter = total-parseInt(total/maxperrow)*maxperrow;

        $('.icon-tray:nth-child('+breakafter+')').css({'clear':'left'});
});

以上假设您将图像设置为向左浮动。

编辑：如果你可以在服务器端做，甚至更好。您可以使用PHP进行相同的数学运算（例如），而不必依赖Javascript。

Answer 3

如果您今年春天可以使用CSS3（Chrome，IE9，Firefox4），那么您可以使用：

http://dev.w3.org/csswg/css3-flexbox/

我建议阅读：

http://www.html5rocks.com/tutorials/flexbox/quick/

不支持CSS3的浏览器仍然会获得自上而下的体验。您将不得不问自己，使用jQuery根据宽度定位每个图标的时间是否值得支持旧版浏览器。

Answer 4

您可以使用CSS完成所有操作 - 尽管您必须使用一些非标准属性。因为你已经标准化为Firefox 3，虽然它应该不是问题。

首先，您垂直翻转每个图像，然后垂直翻转整个div。

另外，我删除了bottom: 0px; div.icon-tray的样式。这种方法没有必要。

以下是我正在使用的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
      <style type="text/css">
         div.icon-tray {
            position: absolute;
            -moz-transform: scaleY(-1);
            -o-transform: scaleY(-1);
            -webkit-transform: scaleY(-1);
            transform: scaleY(-1);
            filter: FlipV;
            -ms-filter: "FlipV";
         }
         img {
            -moz-transform: scaleY(-1);
            -o-transform: scaleY(-1);
            -webkit-transform: scaleY(-1);
            transform: scaleY(-1);
            filter: FlipV;
            -ms-filter: "FlipV";
         }
      </style>
  </head>
  <body>
    <div class="main-div" style= "position: absolute; width: 700px; height: 600px">
      Text text text ...
      <div class="icon-tray">
        <img src="testing.jpg" />
        <img src="testing.jpg" />
        <img src="testing.jpg" />
        <img src="testing.jpg" />
        <img src="testing.jpg" />
        <img src="testing.jpg" />
        <img src="testing.jpg" />
        <img src="testing.jpg" />
        <img src="testing.jpg" />
      </div>
    </div>
  </body>
</html>

需要使用自下而上的图像填充div

4 个答案: