CSS-多行包装

Question

If you can help i just want to have some guidance with regards to the following problem.

Basically if I have too much text in the description of the image, it pushes the image up. What would be the most attractive way of dealing with such an issue?

Thanks.

I created a basic fiddle - re-size the window to get them inline

JSFiddle

div.gallery {
  border: 1px solid #ccc;
}

div.gallery:hover {
    border: 1px solid #777;
}

div.gallery img {
    width: 30%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
}

* {
    box-sizing: border-box;
}

.responsive {
    padding: 0 6px;
    display: inline-block;
    width: 15.99999%;
}

@media only screen and (max-width: 700px){
    .responsive {
        width: 49.99999%;
        margin: 6px 0;
    }
}

@media only screen and (max-width: 500px){
    .responsive {
        width: 100%;
    }
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

Answer 1

For future peoples, I decided that a flex solution would really help me here.

I created the following css code:

.file-wrapper {
    flex-direction: row;
    flex-flow: row wrap;
    justify-content: center;
    display: flex;
}
.file-image {
    padding: 30px;
}

.file-box {
    text-align: center;
    padding: 1em;
    flex-basis: 10em;
    margin: 1em;
}

.fileTextWrapper {
    display: table;
    width: 100%;
    height: 3em;
}
.file-text {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 100%;
}

The HTML is very self explanatory. The wrapper contains all the elements, and then I have divs for the mages and their descriptions. By doing this not only are they responsive but they are aligned in the centre and the text is wrapped nicely.

Answer 2

You can use flex for same approach Update below css part

Update code

div.gallery {
    border: 1px solid #ccc;
    display:flex;
    justify-content:center;
    flex-flow:column nowrap;
    align-items:center;
    padding:10px;
} 

    div.gallery img {
    /* width: 30%; */
    height: auto;
}

 div.gallery { border: 1px solid #ccc; display:flex; justify-content:center; flex-flow:column nowrap; align-items:center; padding:10px; } div.gallery:hover { border: 1px solid #777; } div.gallery img { /* width: 30%; */ height: auto; } div.desc { padding: 15px; text-align: center; } * { box-sizing: border-box; } .responsive { padding: 0 6px; display: inline-block; width: 15.99999%; } @media only screen and (max-width: 700px){ .responsive { width: 49.99999%; margin: 6px 0; } } @media only screen and (max-width: 500px){ .responsive { width: 100%; } } .clearfix:after { content: ""; display: table; clear: both; } 

 <div class="responsive"> <div class="gallery"> <img src="{{ asset('/img/zip.svg')}}"/> <div class="desc">Description</div> </div> </div> <div class="responsive"> <div class="gallery"> <img src="{{ asset('/img/zip.svg')}}"/> <div class="desc">Description Description</div> </div> </div> <div class="responsive"> <div class="gallery"> <img src="{{ asset('/img/zip.svg')}}"/> <div class="desc">Description Description Description Description Description Description</div> </div> </div> 

Answer 3

I would do something like this:

div.gallery {
  border: 1px solid #ccc;
  min-height: 200px;
}

This would make all boxes equal.

Answer 4

You can add vertical-align: top; to your .responsive div, so all div will align from top.. check below snippet

 div.gallery { border: 1px solid #ccc; } div.gallery:hover { border: 1px solid #777; } div.gallery img { width: 30%; height: auto; } div.desc { padding: 15px; text-align: center; } * { box-sizing: border-box; } .responsive { padding: 0 6px; display: inline-block; width: 15.99999%; vertical-align: top; } @media only screen and (max-width: 700px){ .responsive { width: 49.99999%; margin: 6px 0; } } @media only screen and (max-width: 500px){ .responsive { width: 100%; } } .clearfix:after { content: ""; display: table; clear: both; } 

 <div class="responsive"> <div class="gallery"> <img src="{{ asset('/img/zip.svg')}}" /> <div class="desc">Description</div> </div> </div> <div class="responsive"> <div class="gallery"> <img src="{{ asset('/img/zip.svg')}}" /> <div class="desc">Description Description</div> </div> </div> <div class="responsive"> <div class="gallery"> <img src="{{ asset('/img/zip.svg')}}" /> <div class="desc">Description Description Description Description Description Description</div> </div> </div> 

Answer 5

Depending on your notion on a what an attractive solution means and since it hasn't been proposed already. You could use text-overflow ellipsis.

div.desc {
    padding: 15px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}