在 HTML 中右对齐块元素

Right-align block elements in HTML

提问by Tomalak

I'd like to right-align block elements in a floating container.

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

Assume the following markup.

假设有以下标记。

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

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

What I've tried:

我试过的：

• div { text-align: right; }- works in IE8, fails in Firefox (naturally, the images are blocks and not supposed to be affected by text-align)
• img { margin: 0 0 0 auto; }- works in Firefox, fails in IE8
• floating the images to the right - does not work as I never want the images on the same line. Also, floated images no longer push down the following content.

• div { text-align: right; }- 在 IE8 中工作，在 Firefox 中失败（自然，图像是块，不应受 影响text-align）
• img { margin: 0 0 0 auto; }- 在 Firefox 中工作，在 IE8 中失败
• 将图像向右浮动 - 不起作用，因为我从不希望图像在同一行上。此外，浮动图像不再向下推以下内容。

What else can I try? I prefer a pure CSS solution, if that's at all possible.

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

---

---

UPDATE

更新

Here's a fiddle that explains the full markup: http://jsfiddle.net/Tomalak/yCTHX/3/

这是一个解释完整标记的小提琴：http: //jsfiddle.net/Tomalak/yCTHX/3/

Setting float: right;works for all real browsers, for IE8 it extends the image box in the row first over the entire width and pushes down the box with the text.

设置float: right;适用于所有真实浏览器，对于 IE8，它首先在整个宽度上扩展行中的图像框，然后将带有文本的框向下推。

采纳答案by Silviu-Marian

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

回答by pasine

The correct way to align an element with CSS is to set text-align on the container and margin on the children elements.
Your tries are wrong since you are setting margin and text-align on the img tag. Your css should look like:

将元素与 CSS 对齐的正确方法是在容器上设置 text-align 并在子元素上设置边距。
您的尝试是错误的，因为您在 img 标签上设置了边距和文本对齐。你的 css 应该是这样的：

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

Just tested on ie8, ff and chrome.
http://jsfiddle.net/notme/wfwjf/2/

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

回答by pasine

use clearfix hack, this will help you to not to float bottom img next to top img. height width can be define as you wish

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

HTML

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

     </div>

Here is the demo Fiddle

这是演示小提琴

回答by Sunil Kumar

There are two possible solutions one with basic HTML attribute: Approach 1:

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

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

Approach 2: You can use Column based layouts using http://www.gridsystemgenerator.com

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

Col 1 Col 2 text.. image

Col 1 Col 2 文本.. 图像

回答by Sunil Kumar

Put them in a div aligned right:

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

Then use js to set the width of the div to the image:

然后用js给图片设置div的宽度：

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

CSS:

CSS：

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

Though it is better with js it is not necessary for it to work

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

Fiddle: http://jsfiddle.net/GuTZ3/2/

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

回答by Christophe

Add overflow: hidden;to the parent div of the images. It will wrap around the images when you float them, and clear the images from the right with clear: right

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

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

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

回答by Ms. Nobody

I know you don't want to edit the HTML.. but if you want images to be in block why don't just put them in one :D!

我知道您不想编辑 HTML .. 但如果您希望图像在块中，为什么不将它们放在一个 :D 中！

HTML

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

CSS

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

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

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

回答by Falguni Panchal

try this

尝试这个

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

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

CSS

CSS

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

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

}