3

我的代码中有一个复杂的层次结构，无法真正改变。它是包含图像的内联块 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/

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

4

3 回答 3

2

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

它会动态计算宽度img-sub-container并在窗口大小发生变化时重新计算。

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

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

如果你制作img-sub-container了一个内联元素，比如说 by display:inline-block;，你仍然需要width设置才能margin: 0px auto;工作和居中。

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

于 2013-04-10T01:23:07.423 回答
1

您可以使用 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/

于 2013-04-10T16:39:09.807 回答
0

如果您知道图像的宽度和每行的图像数量，那么您可以设置容器的宽度并将其水平居中，同时margin: 0 auto浮动图像容器以避免每个之间的空白（4px 间隙）图像由于. 您不再需要容器，但如果删除它，则需要在容器元素上添加 a，因为它仅包含浮点数并且流程中没有其他元素：更新的小提琴 或没有浮点数，您需要删除空格，例如通过编写（最好在 HTML 代码中删除空格，然后尝试在 CSS 中否定它的效果，它更加健壮）inline-block.subclearfix
</div><div>

.sub或者您可以使用文本居中对齐容器并在另一个小提琴中设置类似的宽度

于 2013-04-10T00:05:42.387 回答