HTML中的右对齐块元素

我想右对齐浮动容器中的块元素

假设以下标记

<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 auto；}

  -在Firefox中工作，在IE8中失败
• 将图像向右浮动-不起作用，因为我从不希望图像在同一行上。此外，浮动图像不再向下推送以下内容

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

---

更新

下面是解释完整标记的提琴：

---

设置<代码>浮动：右适用于所有真正的浏览器，对于IE8，它首先将行中的图像框扩展到整个宽度，然后向下推文本框。

我知道您不想编辑HTML。。但是如果你想让图像在块中，为什么不把它们放在一：D

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

HTML 演示：

试试这个

CSS

---

将它们放在右对齐的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>

CSS:

虽然使用js更好，但它没有必要工作

---

小提琴：

添加

溢出：隐藏

到图像的父div。当您浮动图像时，它将环绕图像，并使用

clear:right

使用ClearFixHack，这将帮助您避免将底部img浮动到顶部img旁边。 高度和宽度可以根据需要定义

HTML

---

以下是

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

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

…一些文本。。。

方法2： 可以使用以下命令使用基于列的布局：

第1列第2列

---

文本。。image

使用CSS对齐元素的正确方法是在容器上设置文本对齐，在子元素上设置边距。
您的尝试是错误的，因为您正在img标记上设置边距和文本对齐。您的css应该如下所示：

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

刚刚在ie8、ff和chrome上测试。

---

设置div

文本对齐：右？@Ms.Nobody噢，拜托。如果问问题的人有123k代表，我想答案不会那么简单：D@Ms.Nobody这不是重复的数量，而是我说过我已经尝试了
text align:right。我的问题里没有那么多文字，我不明白。您在错误的元素上使用了文本对齐。它应该设置在容器上，而不是子元素上。请阅读OP的问题“将图像向右浮动-不起作用，因为我从不希望图像在同一行上。此外，浮动图像不再向下推动以下内容。”是的，这适用于所有现代浏览器，但不幸的是，它在IE中不起作用。请参阅我的问题更新+1无论如何，因为这是一个干净的解决方案。@Tomalak不，它在IE中不起作用，在那个布局中不起作用。
：n个子项
选择器也是如此。您可以尝试将
方向：rtl
放在
（奇数）.box
行上，但就我个人而言，此时我会使用javascript，因为它的时间效率要高得多。即使在旧的IE中，也会有大量CSS开始工作。这就是我用来让
：nth-child（）
表现出来的，但它可能会在其他地方产生不利影响。@Tomalak我们有点偏离了原来的问题。使用
溢出：自动
会比
溢出：隐藏
更好。因为我们不知道OP是否想隐藏额外的内容。（也可能对访客更有帮助）…：）将图像向右浮动会在IE中的整个页面上加宽容器
。有两个浮动容器彼此相邻（一个带有图像，一个带有文本）。它们应该是同一行中的一行，即
float
将文本容器推到下一行：-/关于
文本对齐
，您完全正确。这就是我一直在尝试的，问题文本在这方面是错误的。更正。为什么两个容器都浮在水面上？您应该只浮动第一个容器，不是吗？这是一个有效的问题，我将尝试只浮动一个（即图像）容器。不，这不起作用，因为它会影响图像旁边的固定宽度文本块（请参见与的比较）。这不是我想到的干净解决方案-我希望避免向页面添加更多标记。实用解决方案。我希望避免添加更多的标记，但最终可能会这样做。
.image1 {
    width: 200px;
    border:1px solid red;
    height:100px;
    margin:10px 0;

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

}

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

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

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

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

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

     </div>

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

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