línea que aparece debajo de div relativa

Actualmente estoy creando un sitio web creado por tres divs principales en una página. Entre cada div, tengo una débil hora para ayudar a “dividirlos” visualmente.

Entre mi primer y segundo divs, la hora se muestra bien.

Entre el segundo y el tercero está mi problema: la hora se muestra debajo de la segunda división. Tengo la sensación de que tiene que ver con la posición relativa del contenedor de mi segundo div, pero eso es necesario para que yo coloque las imágenes dentro de.

He intentado mostrar: bloquear y envolver la segunda división dentro de otro contenedor, entre otras cosas, pero nada ha funcionado aún.

Podría intentar usar div con un fondo / borde en lugar de hr, pero no estoy seguro de si esta es la forma correcta de abordarlo (todavía estoy aprendiendo a manejar las cosas).

A continuación se muestra mi código para el ‘segundo div’ y la hora que estoy tratando de posicionar.

  

Y mi CSS

 hr { margin: 40px 0px; border: none; height: 1px; color: #ececec; /* old IE */ background-color: #ececec; /* Modern Browsers */ } /* PORTFOLIO --------------------------*/ #portfoliocont { position: relative; margin-bottom: 40px; display: block; } .smallthumb, .blankthumb { display: inline-block; position: absolute; } .smallthumb a { text-decoration: none; } .smallthumb img { -webkit-box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.23); -moz-box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.23); box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.23); } .blankthumb { background: #f2f2f2; width: 296px; height: 174px; } #thumb1 { left: 0px; top: 0px; } #thumb2 { left: 335px; top: 0px; } #thumb3 { right: 0px; top: 0px; } #thumb4 { left: 335px; top: 250px; } #thumb5 { right: 0px; top: 250px; } #thumb6 { left: 0px; top: 250px; } #portfoliocont p { padding-top: 10px; color: #808080; font-weight: 400; } .overlay h1 { position: absolute; /*display: inline-block;*/ height: 164px; width: 276px; bottom: 0; top: 0; color: white; background-color: #806d9e; opacity: 0; font: 1em "Helvetica Neue"; text-align: left; padding: 10px 10px 0px 10px; line-height: 1.4em; transition: transform 0.3s, opacity 0.3s; -ms-transition: -ms-transform 0.3s, opacity 0.3s; -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; } .overlay h1 br{ display: block; line-height: 2em; } .overlay:hover h1{ opacity: 1; } #thumb1 a.show { display: block; } #thumb1 a { display: hidden; } 

Gracias

Tu problema aquí es todos los pulgares con position: absolute;

Cuando el navegador renderiza un elemento con position: absolute; No ocupa espacio .

En su caso, el #portfoliocont “no tiene nada dentro”. Lo que quiero decir es que cualquier cosa dentro de esa div ocupa cualquier espacio. Por lo tanto, su altura es cero.

Siguiendo su div de altura cero, el navegador continúa mostrando la etiqueta


.


Recomiendo encarecidamente no colocar sus pulgares absolutamente. Tienes muchas otras opciones, tales como:

  • Mostrar bloque en línea
  • Flotador izquierdo
  • Flexbox (cuidado con la compatibilidad del navegador en este caso)

Aquí hay un ejemplo simple de usar inline-block en inline-block para los pulgares: https://jsfiddle.net/Lfhctqkg/