Setting of Div Parent CSS

Asked

Viewed 185 times

0

I have the following HTML:

<div id="fotos-listagem">
    <div id="fotos-listagem-imagem">
        <img src="http://localhost/proyectopen/assets/uploads/interno_fotos/ingresso/1348357833.jpg" class="img-responsive corte-imagem">
    </div>
    <div id="fotos-listagem-imagem">
        <img src="http://localhost/proyectopen/assets/uploads/interno_fotos/ingresso/1075751499.jpg" class="img-responsive corte-imagem">
    </div>
    <div id="fotos-listagem-imagem">
        <img src="http://localhost/proyectopen/assets/uploads/interno_fotos/ingresso/422227837.jpg" class="img-responsive corte-imagem">
    </div>
    <div id="fotos-listagem-imagem">
        <img src="http://localhost/proyectopen/assets/uploads/interno_fotos/ingresso/286290440.jpg" class="img-responsive corte-imagem">
    </div>
    <div id="fotos-listagem-imagem">
        <img src="http://localhost/proyectopen/assets/uploads/interno_fotos/ingresso/957801387.jpg" class="img-responsive corte-imagem">
    </div>
    <input type="file" class="upload-multiplo" name="fotos_ingresso" id="fotos_ingresso" accept="image/*">
</div>

And the following CSS:

#fotos-listagem {
    padding: 5px;
    border: 1px solid #CCCCCC;
    margin: 5px;
    background-color: #EDEDED;
    min-height: ;
}

#fotos-listagem-imagem {
    width: 140px;
    height: 140px;
    float: left !important;
}
.corte-imagem {
    width: 130px;
    height: 130px;
    object-fit: cover;
    object-position: center;
}

However, when it comes to visualizing it looks like this: The gray background is below, but it doesn’t track the size of the div inside. How to solve?

inserir a descrição da imagem aqui

css

1 answer

1


This is because the internal Ivs are floated. Floated elements do not influence the dimensions of the ancestors. The solution is simple, just put overflow: hidden in #fotos-listagem (a trick to break context of floats) for the browser to consider the height of children.

#fotos-listagem {
    padding: 5px;
    border: 1px solid #CCCCCC;
    margin: 5px;
    background-color: #EDEDED;
    overflow: hidden;
    
}

#fotos-listagem-imagem {
    width: 140px;
    height: 140px;
    float: left !important;
}
.corte-imagem {
    width: 130px;
    height: 130px;
    object-fit: cover;
    object-position: center;
}
<div id="fotos-listagem">
    <div id="fotos-listagem-imagem">
        <img src="http://localhost/proyectopen/assets/uploads/interno_fotos/ingresso/1348357833.jpg" class="img-responsive corte-imagem">
    </div>
    <div id="fotos-listagem-imagem">
        <img src="http://localhost/proyectopen/assets/uploads/interno_fotos/ingresso/1075751499.jpg" class="img-responsive corte-imagem">
    </div>
    <div id="fotos-listagem-imagem">
        <img src="http://localhost/proyectopen/assets/uploads/interno_fotos/ingresso/422227837.jpg" class="img-responsive corte-imagem">
    </div>
    <div id="fotos-listagem-imagem">
        <img src="http://localhost/proyectopen/assets/uploads/interno_fotos/ingresso/286290440.jpg" class="img-responsive corte-imagem">
    </div>
    <div id="fotos-listagem-imagem">
        <img src="http://localhost/proyectopen/assets/uploads/interno_fotos/ingresso/957801387.jpg" class="img-responsive corte-imagem">
    </div>
    <input type="file" class="upload-multiplo" name="fotos_ingresso" id="fotos_ingresso" accept="image/*">
</div>

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.