29

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

假设以下标记。

<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，它首先将行中的图像框扩展到整个宽度，然后将带有文本的框向下推。

4

8 回答 8

24 
div > img { float:right; clear:right; }
于 2013-07-12T12:29:17.730 回答
5

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

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

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

于 2013-07-12T12:46:22.610 回答
2

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

这是演示小提琴

于 2013-07-12T12:39:14.173 回答
0

我知道您不想编辑 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/

于 2013-07-12T12:30:27.300 回答
0

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

于 2013-07-12T12:34:23.683 回答
0

添加overflow: hidden;到图像的父 div。当您浮动图像时，它将环绕图像，并从右侧清除图像clear: right

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

于 2013-07-12T12:35:49.730 回答
0

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

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

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

Col 1 Col 2 文本.. 图像

于 2013-07-12T12:41:28.493 回答
-2

尝试这个

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;

}
于 2013-07-12T12:33:18.550 回答