在HTML中右对齐块级元素

Question

我想要将浮动容器中的块级元素右对齐。

假设有以下标记。

<div style="float: left;">
  <img style="display: block;" src="...">
  <img style="display: block;" src="...">
</div>

   目前                      期望
+-----------+          +-----------+
|+-------+  |          |  +-------+|
||       |  |          |  |       ||
||       |  |          |  |       ||
|+-------+  |   --->   |  +-------+|
|+----+     |          |     +----+|
||    |     |          |     |    ||
|+----+     |          |     +----+|
+-----------+          +-----------+

我的尝试：

• div { text-align: right; } - 在IE8中有效，在Firefox中无效（自然而然的，图像是块状的，并且不应受text-align的影响）
• img { margin: 0 0 0 auto; } - 在Firefox中有效，在IE8中无效
• 将图像浮动到右侧 - 不起作用，因为我从不希望图像在同一行上。此外，浮动的图像不再向下推动后续内容。

还有什么可以尝试？如果可能的话，我更喜欢纯CSS解决方案。

---

更新

这里是一个说明完整标记的小工具：http://jsfiddle.net/Tomalak/yCTHX/3/

在所有真实浏览器中，设置float: right;都有效，在IE8中，它会先将图像框扩展到整个宽度并向下推动文本框。

- Tomalak

---

将div的文本对齐方式设置为“右对齐”？ - Ms. Nobody

哦，得了吧。 - Tomalak

我猜如果提问者有123k的声望，那么答案就不可能那么简单 :D - Ms. Nobody

@Ms.Nobody，问题不在于声望值的数量。问题在于我已经说过我已经尝试了“text-align: right;”。我的问题中实际上并没有那么多文字。 - Tomalak

我不理解。您正在错误的元素上使用text-align。它应该设置在容器上，而不是子元素上。 - pasine

Answer 1

div > img { float:right; clear:right; }

- Silviu-Marian

---

阅读OP的问题：“将图像浮动到右侧-不起作用，因为我永远不希望图像在同一行上。此外，浮动的图像不再推动以下内容向下。” - Patsy Issa

是的，这对所有现代浏览器都有效，但不幸的是在IE中不起作用。请参见我的问题更新。无论如何+1，因为这是一个干净的解决方案。 - Tomalak

@Tomalak 不，它在IE中不起作用，也不适用于该布局。对于 :nth-child 选择器也是如此。您可以尝试在 (odd) .box 行上放置 direction:rtl，但个人认为此时最好使用JavaScript，因为它更加高效。 - Silviu-Marian

使用ie9.js，即使在旧版IE中，许多CSS也能奇迹般地开始工作。这就是我用来让:nth-child()表现正常的方法，但它可能会对其他地方产生不利影响。 - Tomalak

@Tomalak，我们有点偏离了原来的问题。 - Silviu-Marian

Answer 2

在CSS中对齐元素的正确方法是在容器上设置text-align属性，在子元素上设置margin属性。
你错误地在img标签上设置了margin和text-align属性。你的CSS应该像这样：

div {
float:right;
text-align: right;
}
img {
margin: 0 0 0 auto;
}  

刚在ie8、ff和chrome上测试了一下。
http://jsfiddle.net/notme/wfwjf/2/

- pasine

---

将图像向右浮动会在IE中扩大整个页面上的容器<div>。有两个浮动容器相邻（一个带有图像，一个带有文本）。它们应该在同一行上，但在IE中，float会将文本容器推到下一行。 :-/ - Tomalak

关于text-align，你说得完全正确。这就是我一直在尝试的，问题的文本在这方面是错误的。正在进行修正。 - Tomalak

为什么你将两个容器都浮动了？你应该只浮动第一个，对吧？ - pasine

这是一个有效的问题，我会尝试只浮动一个（即图像）容器。 - Tomalak

不行，这样做会影响图片旁边的固定宽度文本块（请参见http://jsfiddle.net/Tomalak/yCTHX/6/与http://jsfiddle.net/Tomalak/yCTHX/4/进行比较）。 - Tomalak

Answer 3

使用clearfix hack，这将帮助您不将底部图像浮动到顶部图像旁边。高度和宽度可以根据您的需要定义。

.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    zoom: 1;
}
.main_div {
    width: 100%;
    height: auto;
    float: left;
}
.big_img {
    float: right;
    width: 100px;
    height: 100px;
}
.small_img {
    float: right;
    width: 100px;
    height: 100px;
}

HTML

<div class="main_div">
    <img src="" class="big_img">
    <div class="clearfix"></div>
     <img src="" class="small_img">

     </div>

这里是演示 Fiddle。

- user2021917

---

这不是我想要的干净解决方案 - 我想避免在页面上添加更多的标记。 - Tomalak

Answer 4

我知道你不想编辑HTML...但是如果你想让图片呈现为块状，为什么不把它们放在一个块中呢:D！

HTML

    <p>This is crap station train to the mainstream...</p>        

    <div class="sth">
    <p><img src="https://www.gravatar.com/avatar/0ada184c98bf9073d15b2dc815be0170?s=32&d=identicon&r=PG" alt="jesus was not" /></p>
    <p><img src="http://unicornify.appspot.com/avatar/9d699fb41cafd14479fbd1ae1c89c669?s=128" alt="mum asked me to" /></p>
    </div>

    <p>This is crap station train to the mainstream...</p>

CSS

.sth{display:block; text-align:right;}
.sth img{ 
border: 1px solid black;
}

演示：http://jsfiddle.net/goodfriend/zBnqQ/39/

- Ms. Nobody

---

务实的解决方案。我想避免添加更多的标记，但最终可能会这样做。 - Tomalak

Answer 5

把它们放在右侧的 div 中：

<div style="float: right;">
  <div align='right' class='content-container'>
    <img class='image1' style="display: block;" src="..." />
    <img class='image2' style="display: block;" src="..." />
  </div> 
</div>

然后使用js将div的宽度设置为图像的宽度：

$('.container').width($('.image1').width());

CSS：

.image1 {
    width: 50px;
}
.image2 {
    width: 30px;
}

虽然使用 JavaScript 会更好，但不必要才能运行

演示链接：http://jsfiddle.net/GuTZ3/2/

- user2568107

Answer 6

有两种可能的解决方案，一种是基本的HTML属性： 方法1：

<p>
<img src="...." align="right">...some text...
</p>

方法二： 您可以使用基于列的布局，使用http://www.gridsystemgenerator.com。

列1 列2 文本.. 图像

- Sunil Kumar

Answer 7

将overflow: hidden;添加到图像的父级div中。当您浮动它们时，它将围绕图像包裹，并使用clear: right从右侧清除图像。

http://jsfiddle.net/zBnqQ/15/

- Christophe

---

使用 overflow: auto 会比 overflow: hidden 更好，因为我们不知道 OP 是否想要隐藏额外的内容。这也可能对访问者更有帮助... :) - Mr_Green

Answer 8

试一下这个

http://jsfiddle.net/rtaUj/4/

CSS

.image1 {
    width: 200px;
    border:1px solid red;
    height:100px;
    margin:10px 0;

}
.image2 {
    width: 100px;
   border:1px solid red;
    height:100px;

}

- Falguni Panchal