Question

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

假设以下标记。

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

   current                 wanted
+-----------+          +-----------+
|+-------+  |          |  +-------+|
||       |  |          |  |       ||
||       |  |          |  |       ||
|+-------+  |   --->   |  +-------+|
|+----+     |          |     +----+|
||    |     |          |     |    ||
|+----+     |          |     +----+|
+-----------+          +-----------+

我尝试了什么：

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，它首先在整个宽度上扩展行中的图像框，然后向下按下文本框。

Answer 1

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

Answer 2

使用CSS对齐元素的正确方法是在容器上设置text-align，在子元素上设置边距您尝试错误，因为您在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/

Answer 3

使用clearfix hack，这将帮助你不要在img旁边浮动底部img。高度宽度可以根据需要定义

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

以下是demo Fiddle

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

DEMO：http://jsfiddle.net/goodfriend/zBnqQ/39/

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

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

小提琴：http://jsfiddle.net/GuTZ3/2/

Answer 6

将overflow: hidden;添加到图像的父div。当您浮动图像时它会环绕图像，并使用clear: right

清除右侧的图像

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

Answer 7

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

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

方法2：您可以使用http://www.gridsystemgenerator.com

使用基于列的布局

Col 1 Col 2 文字..图片

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;

}

右对齐HTML中的块元素

8 个答案:

HTML

CSS