Right-align block elements in HTML

Question

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

Assume the following markup.

  

        
                      

              相关标签:
       
      

Answer 1

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

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

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

Col 1 Col 2 text.. image

Answer 2

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

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

try this

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;

}

Answer 4

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

Here is the demo Fiddle

Answer 5

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

Answer 6

Put them in a div aligned right:

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

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

CSS:

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

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

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