WEB, выровнять текст

Question

помогите мне выровнять текст чтобы он был идеально ровным во всех 3 блоках, в основном не получается выровнять текст первого блока чтобы был линейно ровным по сравнению с двумя другими.

Вот код:

.footer_ {
  font-family: "DM Serif Display", serif !important;
  font-weight: inherit !important;
  font-size: 18px !important;
}

.footer-block p {
  color: rgb(0, 0, 0);
  font-family: Roboto, sans-serif;
  font-weight: 300;
  line-height: 2;
}

.footer-blocks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 90%;
  margin: 0 auto;
  box-sizing: border-box;
  align-items: start;
}

.footer-block {
  padding: 10px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
}

.footer-block p,
.footer-block table {
  margin: 0;
}

.box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 0px;
  gap: 10px;
}

.box div {
  box-sizing: border-box;
}

.box-text {
  padding-bottom: 10px;
}

.box-text_p {
  line-height: 1.5;
}

.footer-block:nth-child(1) .box-text_p {
  margin-top: 0;
}

<div class="footer-blocks">
  <div class="footer-block">
    <p class="footer_">APIE MUS</p>
    <div class="box-text_p">Padedame užtikrinti vaikų ir suaugusių asmenų, turinčių negalią gerovę, saugumą, siekiant pozityvios kiekvieno asmens socializacijos ir integracijos į visuomenę skatinant visavertę asmenybės raišką.</div>
  </div>

  <div class="footer-block">
    <p class="footer_">ADMINISTRACIJOS DARBO LAIKAS</p>
    <div class="box">
      <div>I–IV</div>
      <div>8.00-17.00</div>
      <div>V</div>
      <div>8.00-15.45</div>
      <div>VI</div>
      <div>Nedirbam</div>
      <div>VII</div>
      <div>Nedirbame</div>
      <div>Pietūs</div>
      <div>12.00-12.45</div>
    </div>
  </div>

  <div class="footer-block">
    <p class="footer_">KONTAKTAI</p>
    <div class="box-text">Kompleksinių paslaugų namai "Alka"</div>
    <div class="box">
      <div>Įmonės kodas:</div>
      <div>305369449</div>
      <div>Adresas:</div>
      <div>Vytauto g. 182, Šiauliai</div>
      <div>Telefonas:</div>
      <div><a href="tel:+3704104468">(41) 504468</a></div>
      <div>El. paštas:</div>
      <div><a href="mailto:[email protected]">info@ kpnalka.lt</a></div>
      <div>Paramos sąskaita:</div>
      <div>LT 61 7300 0101 6098 4814</div>
    </div>
  </div>
</div>

Вот фото моего лучшего результата

Answer 1

.footer-blocks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 90%;
  margin: 0 auto;
}

<div class="footer-blocks">
  <div class="footer-block">
    <p class="footer_">APIE MUS</p>
    <div class="box-text_p">Padedame užtikrinti vaikų ir suaugusių asmenų, turinčių negalią gerovę, saugumą, siekiant pozityvios kiekvieno asmens socializacijos ir integracijos į visuomenę skatinant visavertę asmenybės raišką.</div>
  </div>

  <div class="footer-block">
    <p class="footer_">ADMINISTRACIJOS DARBO LAIKAS</p>
    <div class="box">
      <div>I–IV</div>
      <div>8.00-17.00</div>
      <div>V</div>
      <div>8.00-15.45</div>
      <div>VI</div>
      <div>Nedirbam</div>
      <div>VII</div>
      <div>Nedirbame</div>
      <div>Pietūs</div>
      <div>12.00-12.45</div>
    </div>
  </div>

  <div class="footer-block">
    <p class="footer_">KONTAKTAI</p>
    <div class="box-text">Kompleksinių paslaugų namai "Alka"</div>
    <div class="box">
      <div>Įmonės kodas:</div>
      <div>305369449</div>
      <div>Adresas:</div>
      <div>Vytauto g. 182, Šiauliai</div>
      <div>Telefonas:</div>
      <div><a href="tel:+3704104468">(41) 504468</a></div>
      <div>El. paštas:</div>
      <div><a href="mailto:[email protected]">info@ kpnalka.lt</a></div>
      <div>Paramos sąskaita:</div>
      <div>LT 61 7300 0101 6098 4814</div>
    </div>
  </div>
</div>

Answer 2

Предложу такой вариант с grid

.container {
  width: 90%;
  height: auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 0.2fr 1.8fr;
  gap: 0px 10px;
  grid-auto-flow: row;
  justify-content: stretch;
  align-content: start;
  justify-items: stretch;
  align-items: stretch;
  grid-template-areas: "footer_1 footer_2 footer_3" "footer_4 footer_5 footer_6";
}

.footer_1 {
  grid-area: footer_1;
}

.footer_2 {
  grid-area: footer_2;
}

.footer_3 {
  grid-area: footer_3;
}

.footer_4 {
  grid-area: footer_4;
}

.footer_5 {
  grid-area: footer_5;
}

.footer_6 {
  grid-area: footer_6;
}

<div class="container">
  <div class="footer_1">
    <h4>APIE MUS</h4>
  </div>
  <div class="footer_2">
    <h4>ADMINISTRACIJOS DARBO LAIKAS</h4>
  </div>
  <div class="footer_3">
    <h4>KONTAKTAI</h4>
  </div>
  <div class="footer_4">
    <p>Padedame užtikrinti vaikų ir suaugusių asmenų, turinčių negalią gerovę, saugumą, siekiant pozityvios kiekvieno asmens socializacijos ir integracijos į visuomenę skatinant visavertę asmenybės raišką.</p>
  </div>
  <div class="footer_5">
    <p>I–IV 8.00-17.00<br> V 8.00-15.45<br> VI Nedirbam<br> VII Nedirbame<br> Pietūs 12.00-12.45</p>
  </div>
  <div class="footer_6">
    <p>Kompleksinių paslaugų namai "Alka" Įmonės kodas: 305369449 Adresas: Vytauto g. 182, Šiauliai<br> Telefonas: <a href="tel:+3704104468">(41) 504468</a><br> El. paštas: <a href="mailto:[email protected]">info@ kpnalka.lt</a><br> Paramos sąskaita: LT 61
      7300 0101 6098 4814</p>
  </div>
</div>

БЛОГ НА HUSL

WEB, выровнять текст

Ответы (2 шт):