Instantly insert DIV with CSS [duplicate]

Navigation
0

Hello

I'm trying to make s div's automatically fit one next to the other and if there is no side space you go and automatically dock from left to right, but it's not working.

NOTE: What determines the format of the DIV is the image that goes into it.

Follow my code and the image of how I want to do it.

HTMLcode

<html><head><title></title><style>article.tile{display:block;float:left;box-sizing:border-box;width:100px;height:100px;font-size:3em;font-weight:700;padding:06px;color:#fff;text-shadow:-1px0black,01pxblack,1px0black,0-1pxblack;border:1pxdottedblack;}article.tile.wide{width:200px;}article.tile.tall{height:200px;}.tile.yellow{background:yellow;}.tile.red{background:red;}.tile.blue{background:blue;}.tile.black{background:black;}.tile.grey{background:grey;}.tile.green{background:green;}</style></head><body><article><divclass="tile blue"><p>1</p></div>
<div class="tile black"><p>2</p></div>
<div class="tile yellow"><p>3</p></div>
<div class="tile grey"><p>4</p></div>
<div class="tile red"><p>5</p></div>
</article>
</body>
</html>

Thank you

    
asked by anonymous 14.10.2016 / 19:51

2 answers

0

As described in the comment, you need to add certain attributes in the container. It can be too: 

article {
    overflow-x: auto;
    max-width: 100%;
}
    
14.10.2016 / 20:39
0

You will need a 'stress' from JS. You can use the library link , I recommend this library because it is the most used and will guarantee a correct operation in your application and in all modern browsers. To do this only with html and css automatically becomes unfeasible.

  

Follow the creator's github with the documentation    link

. It's simple, I can also help you if you need ...

Hugs.

    
15.10.2016 / 06:29
Parallel function on website Search phrases with web service