将文本与流体宽度 div 与图像对齐答案

【问题标题】：Aligning text with an fluid width div with images将文本与流体宽度 div 与图像对齐
【发布时间】：2012-01-10 22:15:52
【问题描述】：

我有一个 div，其标题文本向右对齐。接下来是一个无序列表，其列表项是我向左浮动的图像。

当您水平扩展浏览器时，随着可用空间的增加，图像会水平对齐（每行更多）。

但是，文本保持向右对齐，并且在新图像无法水平对齐的那一刻，文本与最右边的图像之间存在未对齐。

我想将文本与最右边的图像对齐，而不是与父 div 对齐。这可能吗？

请看：http://jsfiddle.net/jcDqW/

<div class="container">
    <span>Text goes here.</span>
    <ol>
        <li><img src="http://t3.gstatic.com/images?q=tbn:ANd9GcTsOZfG8edaAiTfWbHx1a26hJIhUbZPbLzCH2BHakudlSTtI5SZOSEyvFGJpw" /></li>
        <li><img src="http://t3.gstatic.com/images?q=tbn:ANd9GcTsOZfG8edaAiTfWbHx1a26hJIhUbZPbLzCH2BHakudlSTtI5SZOSEyvFGJpw" /></li>
        <li><img src="http://t3.gstatic.com/images?q=tbn:ANd9GcTsOZfG8edaAiTfWbHx1a26hJIhUbZPbLzCH2BHakudlSTtI5SZOSEyvFGJpw" /></li>
        <li><img src="http://t3.gstatic.com/images?q=tbn:ANd9GcTsOZfG8edaAiTfWbHx1a26hJIhUbZPbLzCH2BHakudlSTtI5SZOSEyvFGJpw" /></li>
        <li><img src="http://t3.gstatic.com/images?q=tbn:ANd9GcTsOZfG8edaAiTfWbHx1a26hJIhUbZPbLzCH2BHakudlSTtI5SZOSEyvFGJpw" /></li>
        <li><img src="http://t3.gstatic.com/images?q=tbn:ANd9GcTsOZfG8edaAiTfWbHx1a26hJIhUbZPbLzCH2BHakudlSTtI5SZOSEyvFGJpw" /></li>
        <li><img src="http://t3.gstatic.com/images?q=tbn:ANd9GcTsOZfG8edaAiTfWbHx1a26hJIhUbZPbLzCH2BHakudlSTtI5SZOSEyvFGJpw" /></li>
        <li><img src="http://t3.gstatic.com/images?q=tbn:ANd9GcTsOZfG8edaAiTfWbHx1a26hJIhUbZPbLzCH2BHakudlSTtI5SZOSEyvFGJpw" /></li>
        <li><img src="http://t3.gstatic.com/images?q=tbn:ANd9GcTsOZfG8edaAiTfWbHx1a26hJIhUbZPbLzCH2BHakudlSTtI5SZOSEyvFGJpw" /></li>
    </ol>
</div>

CSS：

.container {
    width: auto;
}

.container span {
    width: 100%;
    float: right;
    text-align: right;
    clear: both;
}

.container li img  {
    float: left;
    margin: 0 10px 10px 0;
}

【问题讨论】：

请发布jsFiddle、JS Bin、Tinkerbin 或CSSDesk 代码示例。
jsfiddle.net/jcDqW 请注意，当您展开浏览器时，即使图像仍“卡”在下一行“等待”更多水平空间，文本仍保持向右对齐。我希望文本只能到达第一行最远的图像。

标签： html css

【解决方案1】：

这是一个有效的jsFiddle example — 调整浏览器窗口的大小并惊叹于魔法：

HTML：

<div class="container">
    <span>Text goes here.</span>

    <ol>
        <li><img src="http://placehold.it/120x120" /></li>
        <li><img src="http://placehold.it/120x120" /></li>
        <li><img src="http://placehold.it/120x120" /></li>
        <li><img src="http://placehold.it/120x120" /></li>
        <li><img src="http://placehold.it/120x120" /></li>
    </ol>

    <br class="clear" />
</div>

JavaScript (jQuery)：

$(function() {
    $(window).resize(function() {
        box = $('.container');

        var width = box.width();
        var itemCount = box.find('li').length;
        var itemWidth = box.find('li').width();
        var margin = width - (itemCount * itemWidth);

        if (margin <= 0) {
            margin = width % itemWidth;
        }

        $('.container > span').css({
            'margin-right': margin
        });
    });
});

CSS：

.container {
    background-color: #eee;
    margin: 10px;
    width: auto;
}

.container span {
    background: pink;
    display: block;
    text-align: right;
    width: auto;
}

.container li {
    background-color: #fff;
    float: left;
}

.container li img {
    margin: 0 10px 10px 0;
}

.clear {
    clear: both;
    display: block;
}

注意：此技术并非万无一失，但提供了您想要的效果的简单示例。

【讨论】：

太棒了！谢谢你。您能想到在将其放到实时站点之前我应该调查的任何情况吗？只是好奇，因为你提到它不是防弹的。
如果你保持 HTML/CSS 简单——或者根本不修改它——你不会有任何问题。在调整窗口大小时更改边距的逻辑不够健壮，无法处理 <li> 和 <img /> 元素上的不同宽度、边距和填充，但我发布的示例在所有主要浏览器上都可以正常工作。
谢谢。在上线之前，我会继续进行测试。感谢您的帮助，希望您在这一周过得愉快！

【解决方案2】：

这不是你可以单独使用 CSS 完成的。如果你有兴趣做的话，可能有一种方法可以使用 JavaScript。

【讨论】：

粗鲁。不过，我绝对对 javascript 解决方案感兴趣。它基本上必须是一种算法，检查浏览器宽度与容器区域中的组合图像大小，然后相应地间隔跨度吗？
我就是这么想的。您将其绑定到浏览器窗口的 resize 事件，然后您必须计算父元素的宽度及其子元素的宽度（加上边距）以计算出第一个子元素的实际大小排。这远非不可能，但不会是最流畅的效果。