Automatically fit DIV with CSS

Question

Automatically fit DIV with CSS

Asked 8 years, 2 months ago

Viewed 642 times

0

Hello

I’m trying to get s div’s to automatically fit together next to each other and if there’s no space on the side go and automatically fit from left to right, but it’s not working.

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

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

HTML code

   <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: 0 6px;
   color: #fff;
   text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

   border:1px dotted black;
 }

 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>
<div class="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

I thought the questioning was simple, but I may have misunderstood. In this case an example would be a div.container with width: 600px; Height: Auto; padding: 10px(if necessary) - And div’s. box with float: left; width: auto; height: auto; padding: 2px; margin: 5px; if you exceed the container space jumps down and increases the container height.

– Cleverson

2016/10/14 at 18:21

2 answers

Browser other questions tagged html css

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

by Adriano Interaminense • 56 points · Answer 1 · 2016-10-15T04:29:27+00:00

You will need a JS force. You can use the library http://masonry.desandro.com/, I recommend this library to you because it is the most used and will guarantee you a proper functioning in your application and in all modern browsers. To do this only with html and css automatically becomes unviable.

Follow creator github with documentation https://github.com/desandro/masonry

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

Hugs.

by user2832131 • 41 points · Answer 2 · 2016-10-14T18:39:13+00:00

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

article {
    overflow-x: auto;
    max-width: 100%;
}