html - right - poner texto al lado de una imagen css

Float CSS: flotando una imagen a la izquierda del texto

Question

Para cada casilla de publicación, quiero que la miniatura flote a la izquierda y que el texto flote a la derecha. No quiero que el pulgar se ajuste al texto.

Aquí está mi código html:

<div class="post-container">
<div class="post-thumb"><img src="thumb.jpg" /></div>
<div class="post-title">Post title</div>
<div class="post-content"><p>post description description description etc etc etc</p></div>
</div>

Lo intenté de varias maneras y todavía no puedo hacer que funcione ... el texto no se mostrará a la derecha ...

Aquí está mi código CSS:

.post-container{
margin: 20px 20px 0 0;
border:5px solid #333;
}
.post-thumb img {
float: left;
clear:left;
}
.post-content {
float:right;
}

Answer 1

¿Es esto lo que buscas?

• Cambié el título en una etiqueta h3 (encabezado), porque es una opción más semántica que usar un div .

Demo en vivo # 1
Demostración en vivo n. ° 2 (con el encabezado en la parte superior, no estoy seguro de si querías eso)

HTML:

<div class="post-container">
<div class="post-thumb"><img src="http://dummyimage.com/200x200/f0f/fff" /></div>
<div class="post-content">
<h3 class="post-title">Post title</h3>
<p>post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc </p>
</div>
</div>

CSS:

.post-container {
margin: 20px 20px 0 0;
border: 5px solid #333;
overflow: auto
}
.post-thumb {
float: left
}
.post-thumb img {
display: block
}
.post-content {
margin-left: 210px
}
.post-title {
font-weight: bold;
font-size: 200%
}

Answer 2

Casi siempre uso desbordamiento: oculto en mis elementos de texto en esas situaciones, a menudo funciona como un hechizo;)

.post-container {
margin: 20px 20px 0 0;
border:5px solid #333;
}
.post-thumb img {
float: left;
}
.post-content {
overflow:hidden;
}

Answer 3

Establezca el ancho de post-contenido y post-thumb para que obtenga un diseño de dos columnas.

Answer 4

Mira esta muestra: http://jsfiddle.net/Epgvc/1/

Simplemente hice flotar el título a la izquierda y agregué un clear:both div al fondo ...

Answer 5

Solo necesita flotar los dos elementos restantes:

.post-container{
margin: 20px 20px 0 0;
border:5px solid #333;
}
.post-thumb img {
float: left;
}
.post-content {
float: left;
}

Editar: en realidad, no necesitas el ancho, simplemente flotar ambos a la izquierda

Answer 6

.post-container{
margin: 20px 20px 0 0;
border:5px solid #333;
width:600px;
overflow:hidden;
}
.post-thumb img {
float: left;
clear:left;
width:50px;
height:50px;
border:1px solid red;
}
.post-title {
float:left;
margin-left:10px;
}
.post-content {
float:right;
}

<div class="post-container">
<div class="post-thumb"><img src="thumb.jpg" /></div>
<div class="post-title">Post title</div>
<div class="post-content"><p>post description description description etc etc etc</p></div>
</div>

jsFiddle