2

Tengo el siguiente código:

p{
	border-right: 2px solid lightgray;
	border-bottom: 2px solid lightgray;
	padding-right: 5px;
	padding-bottom: 5px;
	margin: 10px 0;
	height: auto;
}
<p><img src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" style="width: 200px;height: 200px;float:right;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua.
.</p>

De qué forma puedo hacer para que los bordes o mejor dicho, el p se haga al tamaño del contenido. Los bordes "atraviesan" la imagen. Pero quiero que el border-bottom esté luego de la imagen.

2 respuestas 2

3

Este es un error común que surge al usar float y la solución en la jerga se conoce como clearfix

En tu caso puedes usar:

overflow: auto;

Ejemplo:

p{
	border-right: 2px solid lightgray;
	border-bottom: 2px solid lightgray;
	padding-right: 5px;
	padding-bottom: 5px;
	margin: 10px 0;
	overflow: auto;
}
<p><img src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" style="width: 200px;height: 200px;float:right;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
.</p>

1
  • Ésta fue la respuesta más acertada. Commented el 10 ene. 2017 a las 21:55
2

Le falta poner al <p> el float: left ya que la imagen tiene float: right;

p {
  border-right: 2px solid lightgray;
  border-bottom: 2px solid lightgray;
  padding-right: 5px;
  padding-bottom: 5px;
  margin: 10px 0;
  height: auto;
  float: left;
}
<p>
  <img src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" style="width: 200px;height: 200px;float:right;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>

1
  • Ésta respuesta es correcta, pero omite el margin. Commented el 10 ene. 2017 a las 23:15

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.