Question

假设我有一张图片，文字正下方。我将其包裹在div中并将内容置于中心。

现在假设我有20个这样的图像，所有图像尺寸相同（即65px）但文本数量不同（文本可以换行）。

我想要实现的目标如下：

我想尽可能多地在同一条线上显示每条线周围10px的左/右边距。此外，它们将始终居中并同样填充浏览器窗口的宽度。

理想情况下，如果浏览器宽度非常小，它只会在每一行显示一个。

对于这种情况，任何人都有CSS解决方案吗？

严格用于移动......无需担心I.E。

非常感谢！

更新

下面是我正在使用的一些基本代码..正如你所看到的那样，如果我每行硬编码4（每个宽度为25％），它就能完成工作：

HTML：

<div class="m-parent-navigation-container">
    <div class="m-icon-navigation-container">
        <a class="m-icon-navigation-link"><img><br></a>
    </div>
</div>

CSS：

.m-parent-navigation-container
    {
    margin: 0 10px;
    color: rgb(26, 46, 120);
    font-size: 0.9em;
    overflow: hidden;
    }

.m-icon-navigation-container
    {
    float: left;
    text-align: center;
    width: 25%;
    }

.m-icon-navigation-link
    {
    display: block;
    font-family: OpenSansBold;
    font-weight: normal;
    text-align: center;
    text-decoration: none;
    }

Answer 1

看看这个：http://jsfiddle.net/3QSVg/

重要的部分是display: inline-block;和text-align: center;

我不确定这是否正是你所追求的，但这是一个开始。

编辑：

以下是更新版本：http://jsfiddle.net/j78Qw/1/

我认为它更接近你想要的东西。但它仍然存在一些问题。

Answer 2

您可以使用flex-box。浏览器支持仍然缺乏，但如果您主要针对webkit渲染引擎开发，即Windows上的iOS，Android，Chrome，则可以使用它。

请注意：http://codepen.io/anon/pen/fHklC

Answer 3

我相信没有纯CSS解决方案。

首先，您应该float: left图像框。使用JS，您可以获得外部容器的宽度，并将其除以图像框的宽度。这将为您提供一个数字，可以容纳多少个图像框。现在，您可以计算框的最大可能大小以填充容器的整个宽度。这样您就可以将图像对齐到中心。

<ul id="gallery">
    <li><img src="…" /></li>
    <li><img src="…" /></li>
    …
</ul>

var list = $('#gallery');
var items = list.find('li');

var imageWidth = items.width('auto').outerWidth(true);
var nrOfItemsPerRow = Math.min(Math.floor(list.innerWidth() / imageWidth), items.length);
items.css('width', Math.floor(100 / nrOfItemsPerRow) + '%');

Answer 4

inline-block是你的朋友。

http://jsfiddle.net/Vmu9R/1/

有一些注意事项inline-block，因为它在I.E.7及更早版本中得不到支持，但有一些解决方法。

本文介绍了解决方法，通常是关于内联块的好文章

并非您对I.E.7感到担忧，但对于那些可能有条件地包含以下内容的人

/* For IE 7 */
zoom: 1;
*display: inline;

Answer 5

如果我理解正确，你想要排列div s（无论内容是什么），是否具有流畅的宽度，并在页面上没有足够的空间时根据需要将它们包起来？

Flexbox也许能够做到这一点。请参阅this Fiddle。

Flexbox的一些好资源：

Can you use it?

流体浮动div在CSS中的同一行上

5 个答案: