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

时间:2012-01-10 22:15:53

标签: html css

我有一个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;
}

2 个答案:

答案 0 :(得分:2)

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

jsFiddle Screenshot

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

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

答案 1 :(得分:0)

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