Question

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

当您水平展开浏览器时，图像会水平对齐（每行更多），因为有更多空间可用。

然而，文本保持与右侧对齐，并且在新图像无法水平对齐的瞬间，文本与最右侧图像之间存在未对齐。

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

<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;
}

Answer 1

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

jsFiddle Screenshot

<强> 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;
}

注意：此技术不是防弹的，但提供了您想要的效果的简单示例。

Answer 2

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

将文本与带有图像的流体宽度div对齐

2 个答案: