Question

我的代码中有一个复杂的层次结构，无法真正改变。它是包含图像的内联块div的集合，在外部div中。像这样：

<div> <!-- text-align: center -->
    <div><img/></div><!-- display: inline-block -->
    <div><img/></div><!-- display: inline-block -->
    <div><img/></div><!-- display: inline-block -->
    <div><img/></div><!-- display: inline-block -->
    <!-- ... -->
</div>

我需要这些图像根据用户浏览器窗口填充屏幕。我还需要将图像本身左对齐 - 所以如果浏览器每行可以容纳5个图像，而最后一行只有1个图像，则该图像需要一直向左，而不是居中。但是，我需要整个组中心对齐，所以我们右边没有巨大的白边。

我尝试在层次结构中添加另一个div，如下所示：

<div><!-- text-align: center -->
    <div><!-- display: inline-block -->
        <div><img/></div><!-- display: inline-block -->
        <div><img/></div><!-- display: inline-block -->
        <div><img/></div><!-- display: inline-block -->
        <div><img/></div><!-- display: inline-block -->
        <!-- ... -->
    </div>
</div>

这不起作用，因为中间div最终处于全宽，尽管是内联块。可以在此处找到一个示例：http://jsfiddle.net/cwmRw/

关于我如何做到这一点的任何想法？谢谢！

Answer 1

如果允许您使用jQuery，这是一个可行的解决方案：
http://jsfiddle.net/cwmRw/6/

它动态计算img-sub-container的宽度，并在窗口大小改变时重新计算。

对于纯CSS解决方案，您需要知道img-sub-container的宽度（像素，百分比......）。

与高度不同，宽度在块级元素中尽可能地向左和向右扩展。

如果您将img-sub-container作为内联元素，让我们说display:inline-block;，您仍然需要设置 width才能使margin: 0px auto;正常工作，以它为中心。

由于您不知道需要多少宽度，因此必须动态计算和设置它。

Answer 2

您可以使用CSS3媒体查询执行此操作，方法是根据不同的分辨率边界值设置div的宽度。我已经在这里复制了CSS，以防jsfiddle永远不能保留它。

.img-block{
    max-width: 160px;
    max-height: 160px;
}
.div-block{
    display: inline-block;
}
.img-container{
    margin-left: auto;
    margin-right: auto;
}

@media all and (min-width:984px){
    .img-container{
        width: 985px;
    }
}

@media all and (min-width:820px) and (max-width: 984px){
    .img-container{
        width: 820px;
    }
}
@media all and (min-width:656px) and (max-width:820px){
    .img-container{
        width: 656px;
    }
}
@media all and (min-width:492px) and (max-width:656px){
    .img-container{
        width: 492px;
    }
}
@media all and (min-width:328px) and (max-width:492px){
    .img-container{
        width: 328px;
    }
}
@media all and (min-width:164px) and (max-width:328px){
    .img-container{
        width: 164px;
    }
}

这是原始代码http://jsfiddle.net/hxHuV/9/

的修改版本

Answer 3

如果您知道图片的宽度和每行的图片数量，那么您可以设置容器的宽度并使用 margin: 0 auto 水平居中放置{{3在浮动图像容器时，避免由于inline-block导致每个图像之间出现空白（4px间隙）。您不再需要.sub容器，但如果删除它，则需要在容器元素上使用clearfix，因为它只包含浮点数并且流中没有其他元素：fiddle
或者没有浮点数，你需要删除空格，例如编写updated fiddle（更好地删除HTML代码中的空格，然后尝试否定它在CSS中的效果，它更强大）

或者您可以使用文本对齐容器并将.sub的宽度设置为此另一个</div><div>

中心对齐内联块元素的集合，而不使每个元素居中

3 个答案: