I am working on a div with a width of 100% that contains about 10 images, each with different widths and sizes. I want these images to float seamlessly around each other without all being resized to the same column width. Is there a way to achieve this so they maintain their respective sizes while fitting in around each other?
My current code is as follows:
.images {
line-height:0;
-webkit-column-count:6;
-webkit-column-gap:0px;
-moz-column-count:6;
-moz-column-gap:0px;
column-count:6;
column-gap:0px;
background:#545454;
width:100%;
display:inline-block;
}
.images img {
width:100% !important;
height:auto !important;
}
Thank you for your help!