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

Question

假设我有一张图片，其正下方有文字。我把它包起来，div把里面的内容居中。

现在假设我有 20 个这样的图像，都具有相同大小的图像（即 65 像素）但不同数量的文本（文本可以换行）。

我想通过此实现以下目标：

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

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

任何人都有针对这种场景的 CSS 解决方案？

它只适用于移动设备...无需担心 IE

非常感谢！

更新

这是我正在使用的一些基本代码。如果我每行硬编码 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;
    }

score 4 · Accepted Answer

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

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

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

编辑：

这是一个更新版本：http: //jsfiddle.net/j78Qw/1/

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

score 1 · Accepted Answer

您可以为此使用 flex-box。浏览器支持还是比较欠缺的，但是如果你主要为webkit渲染引擎开发，即Windows上的iOS、Android、Chrome，都可以使用。

看：http ://codepen.io/anon/pen/fHklC

score 0 · Accepted Answer

我相信没有纯 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) + '%');

score 0 · Accepted Answer

inline-block是你的朋友吗？

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

有几点需要注意的inline-block是，它在 IE7 和更早版本中没有得到很好的支持，但有一些变通方法。

这篇文章涵盖了变通方法，通常是一篇关于 inline-block 的好文章

不是说您担心 IE7，而是对于那些可能有条件地包括以下内容的人

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

score 0 · Accepted Answer

如果我理解正确，您正在寻找对齐divs （与任何内容），具有流动宽度，并在页面上没有足够空间时让它们根据需要包装？

Flexbox或许能够做到这一点。看到这个小提琴。

Flexbox 的一些很好的资源：

你能用吗？

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

5 回答 5

Related

Reference