Tengo un DIV que contiene una imagen y una segunda DIV. El DIV padre se establece en position: absolute; el niño DIV se establece en position: relative. La idea es que puedo ver mi foto en la parte superior de mi imagen.

El niño DIV debe tener 100% ancho de los padres, a menos 10px en la izquierda, derecha y parte inferior, además de un fondo negro.

CSS:

.article-container {
  position: relative;
}

.photo-caption {
  width: 100%;
  background-color: black;
  position: absolute;
  bottom: 0px;
  margin-right: 10px;
  margin-left: 10px;
  margin-bottom: 10px;
}

HTML:

<div class="span15 article-container">
  <img src="images/example-image-1.png" />
  <div class="photo-caption">This is the subtitle text on top.</div>
</div>

El margen izquierdo golpes .photo-caption fuera de los límites de .article-container. El margen derecho no parece tener ningún efecto.

También he intentado arreglar esto con box-sizing. Parece que para obtener el ancho de .photo-caption abajo a los padres de ancho pero todavía hay el voladizo.

  • Por cierto, creo que puedo solucionar esto usando un contenedor para .photo-caption y establecer el relleno a la izquierda/derecha (en lugar de un margen). Sin embargo, esto no parece como limpiar una solución.
  • Es el título que supone para ocultar la parte inferior de la imagen?
  • si usted proporciona una imagen o una mejor descripción de lo que deseas será más fácil ayudar a los
  • Aquí tenéis una imagen para mostrar de lo que me gustaría hacer: i.imgur.com/fqEc7.png
  • pero desea que el título en la parte superior?
  • Sí, exactamente, el título se encuentra en la parte superior – dentro de un semitransparente negro contenedor.

InformationsquelleAutor Olly F | 2012-03-26

8 Comentarios

  1. 17

    Una posición absoluta elemento se coloca con top, left, right y bottom, no con margin.

    • De acuerdo, lo que yo veo. Sin embargo, yo aún tendría que fijar el margen en la parte derecha. Aquí tenéis una imagen para mostrar de lo que me gustaría hacer: i.imgur.com/fqEc7.png
    • Acerca de lo que el margen está usted hablando? Para la foto-título o por el artículo-contenedor?
    • Para la foto-de título.
    • la leyenda de la foto también debe ser colocado por la izquierda, a la derecha, abajo. Entonces usted también no necesita el ancho de 100% más. Se hace en el momento tan o más no su sentido, porque su foto-título tiene un ancho de 100% + 20px en el momento.
    • Lo resolviste! Así que, en resumen, el elemento debe ser explícitamente posicionado en lugar de utilizar los márgenes. Ancho de 100% puede ser eliminado y el elemento no necesita caja de tamaño.
    • Sí, ya lo tienes. Que es como funciona.

  2. 23

    Es mejor si se quita width:100%. escribir como este:

    .photo-caption  {
                left:0;
                right:0;
                background-color: black;
                position: absolute;
                bottom: 0px;
                margin-right: 10px;
                margin-left: 10px;
                margin-bottom: 10px;
                }
    • Me estoy perdiendo algo? También estoy probando y si usted no pone un ancho en el interior de la div, va a ser tan amplia como su contenido, no en los alrededores de la div.
    • gracias por señalar el tema porque no vi el position:absolute. Ahora echa un vistazo a mis actualizado responder
    • Sí, Lister, tienes razón. Necesito el fondo de la foto-título a ir 100% de la anchura de los padres, a menos de diez píxeles en el lado izquierdo/derecho.
    • Sandeep, Lister, gracias. Yo creo que tu solución actualizada también funcionaría. Sin embargo, he marcado Sven como resuelto (he leído el primero y se utiliza un poco menos líneas de código!).
  3. 7

    El problema es que width=100% daría photo-caption el ancho exacto de article-container; la adición de los márgenes (o de relleno) no afectaría la anchura de cálculo. Usted puede hacer esto por sí mismo, usando el css calc() así que el estilo se convierte en:

    .photo-caption  {
        width: calc(100% - 20px); //20 = right margin + left margin
        background-color: black;
        position: absolute;
        bottom: 0px;
        margin-right: 10px;
        margin-left: 10px;
        margin-bottom: 10px;
    }

    Tenga en cuenta que usted puede ser que desee comprobar para calc() el navegador de apoyo aquí

  4. 5

    El problema es que va a ajustar su ancho al 100% que no da espacio para los márgenes. En lugar de ajustar el ancho a un porcentaje inferior al 100% y, a continuación, especifique su margen como a la mitad el porcentaje de espacio restante.

    Por Ejemplo:

    style="width:98%; margin-left: 1%;"
    • este debe ser marcado como respuesta correcta
  5. 2

    Utilizar padding en conjunción con box-sizing, o dentro de un bloque con márgenes dentro de su posición absoluta sin márgenes.

  6. 1

    Usted no necesita width:100% si la pantalla de bloque. Que puede resolver todos estos problemas.

    .photo-caption  {
            display:block;
            background-color: black;
            position: absolute;
            bottom: 0px;
            margin-right: 10px;
            margin-left: 10px;
            margin-bottom: 10px;
            padding:10px
            }
  7. 1

    Para:

    Respuesta es Simple : no intente utilizar margen derecha . El uso de ‘margin-left: xxxpx;’ – hacer el xxx lo suficientemente grande como para empujar a su div caja (Div Style= caja) a la derecha tanto como sea necesario. No hay necesidad de un violín, puede poner exactamente donde usted lo desee.

    • Un violín que le sería muy útil, especialmente con la cuestión más específica de esta respuesta a sugerencias.
  8. 0

    Margen es la distancia de cada lado de la vecina elemento O los bordes del documento.

    Margen derecho no significa que va a empujar el elemento hacia la izquierda.Esto significa que va a generar el espacio en el lado derecho.Si el siguiente elemento vendrá vendrá después de la mencionada margen derecha.En su caso, la anchura es de 100%.No hay espacio disponible para la margen derecha.

    Confusión punto:
    1) efecto visual es diferente donde el ancho es automático.Mismo margen se genera en derecho.Pero debido a la ausencia de propiedad width.La anchura es de libre cambio.

    2) el Mismo efecto cuando el elemento está flotando a la derecha.

    Estos 2 apartados anteriores se hizo imagen diferente de la margen derecha en la mente.

Dejar respuesta

Please enter your comment!
Please enter your name here