Выровнять div вертикально по сжатому абзацу (нельзя использовать flex) - PullRequest
Новая
       8

Выровнять div вертикально по сжатому абзацу (нельзя использовать flex)

0 голосов
/ 06 октября 2018

Я знаю, как выровнять div, но я использую wkhtmltopdf, который не поддерживает отображение flex.Я написал код fiddle с примером моей проблемы.Вот объяснение: у меня есть три div с двумя абзацами внутри.Третий абзац должен быть сжат до фиксированной высоты (здесь я поставил 3 см).Когда я делаю это, я не могу выровнять свои div, как вы можете видеть на примере скрипки.Вы заметите, что если я уберу это ограничение (ширина: 3 см), три элемента будут выровнены идеально.Что я должен сделать, чтобы выровнять их все, даже если у меня есть ограничение?

Вот код: 

.box {
  width: 15cm;
  border: 1px solid blue;
}

.ib {
  display: inline-block;
  border: 1px solid yellow;
  text-align: center;
}

.compressed_paragraph {
  width: 3cm;
}

.set_height {
  height: 2cm;
}
<div class="box">
  <div class="ib box1">
    <div class="set_height">
      <p>First text</p>
      <p>Some text underneath</p>
    </div>
  </div>
  <div class="ib box2">
    <div class="set_height">
      <p>Second text</p>
      <p>Some text underneath</p>
    </div>
  </div>
  <div class="ib box3">
    <div class="set_height">
      <p class="compressed_paragraph">Should compress the thrird text</p>
      <p>Some text underneath</p>
    </div>
  </div>
</div>

1 Ответ

0 голосов
/ 06 октября 2018

Вы можете выровнять div, используя vertical-align: bottom; в классе .ib: 

.ib {
  display: inline-block;
  border: 1px solid yellow;
  text-align: center;
  vertical-align: top;
}

Примечание: большинство выравниваний также будет работать,поскольку div имеют одинаковую высоту. 

.box {
  width: 15cm;
  border: 1px solid blue;
}

.ib {
  display: inline-block;
  border: 1px solid yellow;
  text-align: center;
  vertical-align: top;
}

.compressed_paragraph {
  width: 3cm;
}

.set_height {
  height: 2cm;
}
<div class="box">
  <div class="ib box1">
    <div class="set_height">
      <p>First text</p>
      <p>Some text underneath</p>
    </div>
  </div>
  <div class="ib box2">
    <div class="set_height">
      <p>Second text</p>
      <p>Some text underneath</p>
    </div>
  </div>
  <div class="ib box3">
    <div class="set_height">
      <p class="compressed_paragraph">Should compress the thrird text</p>
      <p>Some text underneath</p>
    </div>
  </div>
</div>
...