我有一个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;
}
答案 0 :(得分:2)
这是一个有效的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;
}
注意:此技术不是防弹的,但提供了您想要的效果的简单示例。
答案 1 :(得分:0)
这不是单独使用CSS就能完成的事情。如果这是你有兴趣做的事情,可能有一种方法可以使用JavaScript。