How to cross-div div into 9 equal divs? (3x3)

Question

Hello. I would like you to share your recipes for cross-browser (ie8 +) diva divides by 3x3 only in percents and divas only. It is forbidden to use adaptive frameworks and flexs.

.table { margin: 0; padding: 0; position: absolute; top: 0; right: 0; width: 85%; height: 100%; background: white; font-size: 0; } .table div { width: 33.33333333333333333333%; height: 33.3333333333333333333%; display: inline-block; margin: 0; padding: 0; position: relative; overflow: hidden; font-size: 0; }

 <div class="table"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div class="social"> <a href="" target="blank"><div><i class="icon-vkontakte"></i></div></a> <a href="" target="blank"><div><i class="icon-facebook"></i></div></a> <a href="" target="blank"><div><i class="icon-github-circled"></i></div></a> <a href="" target="blank"><div><i class="icon-linkedin-squared"></i></div></a> </div>

On all browsers is displayed correctly, but for Safari you need to register in .table display: table. And Firefox does not display everything correctly.

Changed the question, you need to divide the div into divas - Alexey Krasnov
And how did you try to solve this puzzle? There is still help, not free freelance. - user207618

Accepted Answer · 2016-04-24T20:16:17

Take down the font-size and do it like a human being :

 * { box-sizing: border-box; } .table { margin: 0; padding: 0; position: absolute; top: 0; right: 0; width: 85%; height: 100%; background: white; border: 1px dotted green; } .table div { width: 33.33333333333333333333%; height: 33.3333333333333333333%; display: inline-block; vertical-align: top; border: 1px dotted red; }

 <div class="table"> <div> Вставить </div><div> содержимое </div><div> легко </div><div> просто </div><div> не </div><div> надо </div><div> трогать </div><div> сочетание </div><div> &lt;/div&gt;&lt;div&gt; </div> </div>

 i { display: inline-block; width: 32px; height: 32px; } .icon-vkontakte { background-image: url(//vk.com/favicon.ico); } .icon-facebook { background-image: url(//www.facebook.com/favicon.ico); } .icon-github-circled { background-image: url(//github.com/favicon.ico); } .icon-linkedin-squared { background-image: url(//ru.linkedin.com/favicon.ico); } a { display: inline-block; width: 50%; height: 50%; } a:hover { background: silver; } html, body, div { height: 100%; margin: 0; padding: 0; }

 <div class="social"> <a href="http://vk.com" target="blank"> <div><i class="icon-vkontakte"></i></div> </a><a href="https://www.facebook.com" target="blank"> <div><i class="icon-facebook"></i></div> </a><a href="https://github.com" target="blank"> <div><i class="icon-github-circled"></i></div> </a><a href="https://ru.linkedin.com" target="blank"> <div><i class="icon-linkedin-squared"></i></div> </a> </div>

Well, vertical-align top eliminates the distance between the base-line and the bottom of the line.
Listen, and how to insert into each div by element, let's say another 1 div, without disturbing the design, so that spaces do not appear?
In general, when entering the site via a mobile phone, these blocks appear in display: block and width: 100%.
Everything works well, except that at the very bottom there is a small empty space under the last block, as I understand it, this is the gap that I got rid of.

user207618 · Answer 2 · 2016-04-24T20:10:51

IE8 is not at hand, but it should work there:

 .table { width: 300px; height: 300px; display: table; } .row { display: table-row; } .row div { display: table-cell; text-align: center; vertical-align: middle; width: 33%; height: 33%; }

 <div class='table'> <div class='row'> <div>1</div> <div>2</div> <div>3</div> </div> <div class='row'> <div>4</div> <div>5</div> <div>6</div> </div> <div class='row'> <div>7</div> <div>8</div> <div>9</div> </div> </div>

How to cross-div div into 9 equal divs? (3x3)

2 answers 2

More articles: