Как сделать чтобы блоки съезжали при уменьшении экрана?

Question

[viktorulyushev]

Есть код

<table id="subbox">
    <tr>
      <td class="top-left"></td>
      <td class="top-mid">
        <table class="banners">
          <tr>
            <td>
              <a href="pages/121.html"><img src="i/interlegis/banners/1.png" alt="Подбор юрисдикций" title="Подбор юрисдикций"> <span class="title">Подбор
                  <br>юрисдикций</span> </a>
            </td>
            <td>
              <a href="pages/41.html"><img src="i/interlegis/banners/2.png" alt="Зарубежный кошелек" title="Зарубежный кошелек"> <span class="title">Зарубежный
                  <br> кошелек</span> <span> Оффшор + счет<br> + 200 USD на счете <br> = 1697 USD</span> </a>
            </td>
            <td>
              <a href="pages/43.html"><img src="i/interlegis/banners/3.png" alt="Прием платежей" title="Прием платежей"> <span class="title">Прием <br> платежей </span> <span> Онлайн платежи на <br> оффшорный  счет</span> </a>
            </td>
            <td>
              <a href="pages/42.html"><img src="i/interlegis/banners/4.png" alt="Специальное предложение" title="Специальное предложение"> <span class="title">Специальное
                  <br> предложение!</span> <span> Оффшор в <b>Белизе</b> <br> <b>499</b> $ </span> </a>
            </td>
            <td>
              <a href="pages/81.html"><img src="i/interlegis/banners/gotovyj_offshor.png" alt="Готовые офшоры" title="Готовые офшоры"> <span class="title">Готовые
                  <br>офшоры</span> </a>
            </td>
            <td>
              <a href="pages/5.html"><img src="i/interlegis/banners/otkrytie_offshora.png" alt="Открытие офшора" title="Открытие офшора"> <span class="title">Открытие
                  <br>офшора</span> </a>
            </td>
            
          </tr>
        </table>
      </td>
      <td class="top-right"></td>
    </tr>
    <tr>
      <td class="bottom-left"></td>
      <td class="bottom-mid"></td>
      <td class="bottom-right"></td>
    </tr>
  </table>

Тоесть 6 блоков,как сделать чтобы они съезжали вниз при уменьшении экрана,а не шли в одну линию?

Comments

[V Sh.]

Во-первых, не верстать таблицами. Таблица всегда будет идти таблицей. Этот тег не для этого. Во-вторых, используйте свойства inline-block, max-width и min-width.

Answer 1

[V Sh.]

Можно, наверное, вот так сделать: https://jsfiddle.net/1bbhc227/
Меняете свойство width у контента, чтобы увидеть как будут вести себя inline-block элементы управления.

Comments

[viktorulyushev]

спасибо

Answer 2

[Владислав]

Для начала не использовать таблицы. И код на jsfiddle или подобные сервисы залейте.