Как бордеры сделать до конца,как в самом левом блоке,чтобы у них у всех границы были одинаковы?

Question

[Артем Кашапов]

Задача,сделать без flex,grid и table.
чисто на float:left

<div class="div" style="background-color: #FF00FF;">

  <div style="width: 100%;max-height: 100px;; float: left;">
    <div style="float: left; width: 24%;border-right: 1px solid #000;">Блок 1Блок 1Блок 1Блок 1Блок 1БлокБлок 1Блок 1Блок 1Блок 1Блок 1БлокБлок 1Блок 1Блок 1Блок 1Блок 1Блок</div>
    <div style="float: left; width: 24%;border-right: 1px solid #000;">Блок 2</div>
    <div style="float: left; width: 24%;border-right: 1px solid #000;">Блок 3</div>
    <div style="float: left; width: 24%;border-right: 1px solid #000;">Блок 4</div>
  </div>
  <div style="clear: both;"></div>
</div>

https://codepen.io/MassiveMyun/pen/mdLRJYW

Comments

[Ankhena]

Не задавая высоту родителю и без JS с вашими условиями не получится. А на JS гуглите equalHeight.js или напишите самостоятельно.

Кстати, кроме флоатов, есть ещё инлайн-блоки. Всё таки попроще и не нужен clearfix.

(Но что-то мне кажется, что можно сменить ваш pdf генератор на что-то более адекватное, но тут я не мастер)

[Ankhena]

Антон Антон

А при печати вот что:

Так, погодите.
Если про pdf речь идет про обычную печать в pdf, то у вас проблемы не с флексами.
Потому что и гриды с флексы прекрасно понимаются.
И проблема у вас исключительно в том, чем вы печатаете pdf. Например, foxit или обычное "сохранить как pdf" прекрасно с этим справляется.

Answer 1

[Антон Антон]

https://codepen.io/FragsterAt/pen/eYrgpZw
но вообще требование сделать это на флоатах - бред. только разве что проверить опыт работы > 10 лет

Comments

[Артем Кашапов]

вот что происходит при печати

[Антон Антон]

Mass1veDit,

[Антон Антон]

А при печати вот что:

[Артем Кашапов]

Антон Антон, почему то блок растягивается на всю страницу. а должно оставаться таким же как на CodePen

[Артем Кашапов]

Mass1veDit, с border-box также

[Антон Антон]

Mass1veDit, браузер я должен угадать? в актуальных поддерживаемых браузерах, вроде, всё работает.

[Артем Кашапов]

Антон Антон, я использую mpdf,поменять его никак.
Он игнорирует большинство стилей.
Как раз таки поэтому я делаю так

[Антон Антон]

Mass1veDit, если это на печать, то лучше всего не страдать фигнёй и сделать через таблицу

[Артем Кашапов]

Антон Антон, ну если например в таблице много текста,то он перемещает таблицу на новую страницу.
А предедущую страницу оставляет пустым

[Антон Антон]

Mass1veDit, можно поиграться с https://developer.mozilla.org/en-US/docs/Web/CSS/b...