Hello! I ask for advice, what is the best way to create such a block with the possibility of adaptability - on divas or a table? I tried on divas, it turns out to be very hemorrhoid, and everything else is not very adaptive. The table is also quite problematic.

I can not understand which of these methods is less problematic) I don’t ask you to write the code for me, just tell me the best option for this type

thanks in advance enter image description here

The code that I wrote on the divas (not full, because the full one was deleted in the heat of the purge and now I am rewriting).

.promo { border-left: 5px solid red; } .promo h1 { font-size: 2.5em; margin-left: 15px; } .gender { border-left: 2px solid red; } .gender p { font-size: 1.5em; margin: 0 0 5px 15px; } .men { display: inline-block; } .men p:first-child { font-size: 1.15em; margin-left: 15px; } .women { display: inline-block; } .women p:first-child { font-size: 1.15em; margin-left: 15px; } .men img { float: left; margin-right: 8px; } .women img { float: left; margin-right: 8px; } 
  <div class="promo about"> <div ><h1>Аудитория</h1></div> </div> <div class="gender"> <p>Пол</p> <div class="men"><p><img src="men.jpg" alt="">Мужчины</p> <p>50%</p> </div> <div class="women"><p><img src="w.jpg" alt="">Женщины</p> <p>50%</p> </div> </div>

  • What can be problematic in divas? And of course if we talk about adaptability, then it is immediately diva. Show that you impose - Vasily Barbashev
  • Added to the question. And yes, he, to put it mildly, is not very) - Alla
  • 2
    You do not approach the layout correctly. First make up 2 blocks, left and right, make the styles so that at fine resolutions, the blocks clearly fill the space. There is no need to enclose information inside these blocks before they have not dealt with the external structure. Go step by step. And the answer from Yuri will help you with this. Remember go top down . And here there is nothing difficult, a large amount of code appears when there are a lot of elements, it does not leave. But you can beg by breaking into sub-pages in which some project for the interface - Vasiliy Barbashev

1 answer 1

It seems to me that for your task it is better to use a div and make it optimal with flexbox . This will allow you to edit any block size as you like. Moreover, now tables are rarely used for such purposes, since modern styles completely and perfectly perform all this work and make it more convenient.

To make the blocks flexible, use @media or vw and vh values. This will allow the blocks to adapt to any screen size.