Question

我想水平显示几张图片。它们应该从右到左对齐。即如果我在图片列表下添加一张图片，则将其留到最后。换行符根据浏览器宽度自动完成。像：

3 2 1 
  5 4

当浏览器宽度变小时

2 1 
4 3
  5

并在添加第6张图片时

3 2 1 
6 5 4

等

到目前为止这是浮动的有效性：对。

现在，如果说图像的宽度为500px，而最后一张图片左侧的左侧空间仅为300，则会有换行符。这很好，但它留下了300px的空白空间，而右侧的边距较小。我希望这些是相同的。此外，在最后一行，当可能没有足够的图像来填充该行时，它们应该居中。不知怎的，这样：

3 2 1 
 5 4

基本上我想要同样的效果，当我把所有图像引用一个类时，它有一个浮点数：右边的定义但是居中。我尝试将所有图像转换为div块，并将该容器块置于text-align：center的中心位置，但这显然是一些东西，它不适用于float。

将事物集中在一起很容易，但是从左到右（我只需要容器div），但是还有一种方法可以让图像从右向左浮动吗？

Answer 1

将此样式提供给图像的容器：

text-align: center;
direction: rtl;

http://jsfiddle.net/3Jxt9/

Answer 2

这个怎么样http://jsfiddle.net/A6zLX/ 我们的想法是将内容切换到内联块并使用从右到左的文本对齐。这是HTML

<div class="container">
    <div class="wide">1</div>
    <div class="wide">2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

和CSS

.container {
    width: 600px;
    height: auto;
    border: 1px solid red;
    text-align: center;
    direction: rtl;
}
.container div {
    display: inline-block;
    width: 25%;
    height: 20px;
    border: 2px solid blue;
}
.container div.wide {
    width: 35%;
}

更新：您可以从容器中删除固定宽度 - 它仍然可以工作，但会变得流畅。

P.S。：抱歉，Mabedan更快地提出这个想法。

CSS：如何浮动：右和中心

2 个答案: