1

这类似于我之前的问题css，将元素紧紧围绕未指定数量的图像，但我意识到我有一个额外的要求。

我有一个显示图像的元素。这个元素需要随着图像数量的增加而水平增长。我事先不知道会有多少图像。

此外，如果屏幕小于元素的最大宽度，则图像应转到下一行，并且外部元素应相应缩小。

http://jsfiddle.net/sXgzn/14/说明了这个问题。

编辑：更清晰的预期结果：http: //jsfiddle.net/sXgzn/23/

<div class = "outer">
  <img src = "xx" class = "inner" />
  <img src = "xx" class = "inner" />
  <img src = "xx" class = "inner" />
</div>

来自小提琴：使屏幕更小，因此顶行只有 2 个太阳。黑色背景应继续环绕图像，边缘没有多余的黑色。

编辑：要清楚一点：顶部有 2，下一行有 1：在第二张图像下方有黑色空间是可以的。我只是不想要宽的黑色右边缘。

4

4 回答 4

0

部分解决。如果您将外部包装器向左或向右浮动，那么它将捕捉到内部图像的外部边界，但是当它们塌陷时，您仍然会遇到包装器超出内部图像宽度的问题。

例如：

.outer
    position: relative;
    float: left;
}

.outer当 div 处于最大宽度时，您还必须清除任何不想在 div 旁边跳跃的元素；

希望这可以帮助

于 2013-08-21T05:00:58.513 回答
0

您可以做的是添加width:100%, min-width:120px, max-width:328px,box-sizing:border-box

.outer {
    background:black;
    padding:10px;
    display:inline-block;
    width:100%;
    min-width:120px !important;
    max-width:328px !important;
    box-sizing:border-box;
}

外部 div 会吃掉整个width父 div 但有max-width一个328px

检查演示：

（注意！！在demo中，外部div在里面div#demobody模拟调整。调整widthof#demobody然后点击run看看有什么区别。）

演示（如果屏幕低于 328 像素）

DEMO（如果屏幕大于 328px）

演示（如果屏幕是 225 像素）

于 2013-08-21T05:13:35.123 回答
0

你可以试试这个：

.outer {
    padding:10px 10px 10px 15px;
    max-width:360px;
    display:inline-block;
}
.inner {
    display: block;
    float: left;
    width:100px;
    background-color: black;
    padding: 10px;
    margin: -5px 0 -5px -10px;
}

http://jsfiddle.net/dagobald/7D5jr/

于 2013-08-21T05:33:50.050 回答
0

因为我没有找到解决这个问题的合适方法，你可以使用 JavaScript 和一些 jQuery 来解决：

现场演示

HTML 示例：

<div class="images">
  <img src="img1.jpg" />
  <img src="img2.jpg" />
  <img src="img3.jpg" />
</div>

CSS：

.images{
  background:#000;
  font-size:0;
}

.images img{
  width:90px;
  height:90px;
  background:#000;
  margin:5px;
}

jQuery：

var $img = $('.images img'),
    n = $img.length,
    w = 100;  // img width + margins

$(window).resize(function(){  
  var W = $('body').width(), 
      s = Math.min(~~(W/w)||1, n);
      $('.images').width(s*w);
}).resize();
于 2013-08-21T08:07:29.820 回答