html - poner - Envolviendo texto alrededor de un div posicionado absoluto
poner texto al lado de una imagen css (9)
Sé que hay algunas preguntas sobre temas similares, pero en su mayoría equivalen a hacer flotar la imagen / div. Necesito tener la imagen (y div) posicionada absolutamente (a la derecha) pero simplemente quiero que el texto fluya a su alrededor. Funciona si hago flotar el div pero luego no puedo colocarlo donde quiero. Como es el texto solo fluye detrás de la imagen.
<div class="post">
<div class="picture">
<a href="/user/1" title="View user profile."><img src="http://www.neatktp.com/sites/default/files/photos/BlankPortrait.jpg" alt="neatktp's picture" title="neatktp's picture" /></a></div>
<span class=''print-link''></span><p>BlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlah.</p>
<p>BlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlah.</p>
</div>
Es un ejemplo del HTML.
siendo el CSS:
.picture img {
background: #fff;
border: 1px #ddd solid;
padding: 2px;
float: right;
}
.post .picture {
display: block;
height: auto;
position: absolute;
right: -10px;
top: -10px;
width: auto;
}
.post {
border: 1px solid #FFF;
border-bottom: 1px solid #e8ebec;
padding: 37px 22px 11px;
position: relative;
z-index: 4;
}
Es un tema de Drupal, por lo que ninguno de este código es mío, es solo que no funciona completamente cuando se trata de colocar una imagen allí.
Aquí hay un truco que podría funcionar para algunos:
Si tiene un contenedor con muchos objetos y desea que el objeto posicionado aparezca arriba en ciertos casos, y abajo en otros casos (varios tamaños de pantalla, por ejemplo), entonces intercalar copias del objeto varias veces. su html, ya sea en inline(-block) , o con float , y luego display:none los elementos que no desea ver de acuerdo con las condiciones que necesita.
Aquí hay un JSFiddle para mostrar exactamente lo que quiero decir: JSFiddle de posicionamiento correcto alto y bajo
Nota: he añadido color solo para efecto. A excepción de los nombres de clase, los divs subject-1 y subject-2 son copias exactas entre sí.
Como lo mencionó @Kyle Sevenoaks, está eliminando el contenido de posición absoluta del flujo de documentos.
Por lo que puedo ver, la única manera de hacer que el div principal enrolle el contenido posicionado absoluto, es usar javascript para establecer el ancho y la altura de cada cambio.
Creo que la mejor opción es agregar un div adicional después del contenido flotante, pero aún dentro del padre para borrar los estilos anteriores.
<div class="clear"></div>
Y CSS:
.clear
{clear:both;}
Cuando coloca un div absolutamente, lo está eliminando del flujo de documentos, por lo que los otros elementos actuarán como si no estuvieran allí.
Para solucionar esto, puedes usar márgenes:
.myDivparent
{
float: left;
background: #f00;
}
.myDivhascontent
{
margin-left: 10px; /*right, bottom, top, whichever you need*/
}
Con suerte eso hará el truco :)
El posicionamiento absoluto no le permite envolver texto. Tienes que usar flotador y posición usando margen o relleno.
En mi opinión, el rasgo "Absoluto" está mal llamado, porque su posición es en realidad relativa a la primera posición de padre no es estática
<div class="floated">
<div style="position: relative;">
<div class="AbsoluteContent">
stuff
</div>
</div>
</div>
Hay una solución fácil a este problema. Está usando espacios en blanco: nowrap;
<div class="position:relative">
<div style="position: absolute;top: 100%; left:0;">
<div style="white-space:nowrap; width: 100%;">
stuff
</div>
</div>
</div>
Por ejemplo, estaba haciendo un menú desplegable para una navegación, por lo que la configuración que estaba usando es
<ul class="submenu" style="position:absolute; z-index:99;">
<li style="width:100%; display:block;">
<a href="#" style="display: block;width: 100%;white-space: nowrap;">Dropdown link here</a>
</li>
<ul>
Ejemplos de imagen
Además, si aún no puede resolverlo, eche un vistazo a los menús desplegables en las plantillas de arranque que puede buscar en Google. A continuación, descubra cómo funcionan porque están usando la posición absoluta y consiguen que el texto ocupe un ancho del 100% sin ajustar el texto.
La posición absoluta saca el elemento del flujo de documentos normal y, por lo tanto, no interactúa con los otros elementos. Tal vez deberías repasar cómo colocarlo usando flotador, y preguntar sobre esto aquí en si te quedas atascado :)
Sé que esta es una pregunta antigua, pero la encontré tratando de hacer lo que creo que intentabas hacer. He creado una solución utilizando el: antes del selector de CSS, por lo que no es muy bueno con ie6-7, pero en cualquier otro lugar debería ser bueno.
Básicamente, al poner mi imagen en un div, puedo agregar un bloque flotante largo antes de la mano para golpearlo y el texto se envuelve alegremente a su alrededor.
img {
float:right;
clear:both;
width: 50% ;
margin: 30px -50px 10px 10px ;
}
.rightimage:before {
content: '''' ;
display:block;
float: right;
height: 200px;
}
Puede verificarlo aquí: