justificar - Alinear a la derecha los elementos del bloque en HTML

como se alinea a la derecha en html

Question

Me gustaría alinear a la derecha los elementos de bloque en un contenedor flotante.

Supongamos el siguiente marcado.

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

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

Lo que he intentado:

• div { text-align: right; } div { text-align: right; } - funciona en IE8, falla en Firefox (naturalmente, las imágenes son bloques y se supone que no se ven afectadas por text-align )
• img { margin: 0 0 0 auto; } img { margin: 0 0 0 auto; } - funciona en Firefox, falla en IE8
• Flotando las imágenes a la derecha, no funciona porque nunca quiero que las imágenes estén en la misma línea. Además, las imágenes flotantes ya no empujan hacia abajo el siguiente contenido.

¿Qué más puedo probar? Prefiero una solución CSS pura, si eso es posible.

ACTUALIZAR

Aquí hay un violín que explica el marcado completo: http://jsfiddle.net/Tomalak/yCTHX/3/

Ajuste de float: right; Funciona para todos los navegadores reales, para IE8 primero extiende el cuadro de imagen en la fila en todo el ancho y empuja hacia abajo el cuadro con el texto.

Answer 1

use el hack de clearfix, esto le ayudará a no flotar en la parte inferior de la imagen junto a la imagen superior. El ancho de altura se puede definir como desee.

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

Aquí está la demo Fiddle.

Answer 2

Añadir overflow: hidden; al div padre de las imágenes. Se envolverá alrededor de las imágenes cuando las hagas flotar, y borra las imágenes de la derecha con clear: right

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

Answer 3

Hay dos soluciones posibles, una con el atributo HTML básico: Enfoque 1:

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

Enfoque 2: puede utilizar diseños basados ​​en columnas utilizando http://www.gridsystemgenerator.com

Col 1 Col 2 texto .. imagen

Answer 4

La forma correcta de alinear un elemento con CSS es establecer la alineación del texto en el contenedor y el margen en los elementos secundarios.
Sus intentos son incorrectos ya que está configurando el margen y la alineación de texto en la etiqueta img. Tu css debería verse como:

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

Solo probado en ie8, ff y cromo.
http://jsfiddle.net/notme/wfwjf/2/

Answer 5

Ponlos en una div alineada a la derecha:

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

Luego usa js para establecer el ancho del div a la imagen:

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

CSS:

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

Aunque es mejor con js no es necesario que funcione.

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

Answer 6

Sé que no quieres editar el HTML ... pero si quieres que las imágenes estén en bloque, ¿por qué no solo las pongas en una: 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 7

prueba esto

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 8

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