1

Здравствуйте имеется вот такой блок, заголовки в нем могут отличатся по количеству строк соответственно декоративный разделитель может съезжать. Вопрос в следующем если в CSS(не JS) способ задать вышину всех заголовков по самому большому из них? введите сюда описание изображения

2 ответа 2

0

Пример 1 (при условии, что нижний текст содержит одинаковое кол-во строк )

* {
  box-sizing: border-box;
}

.cards {
  display: flex;
}

.card {
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

.card__dot {
  width: .5rem;
  height: .5rem;
  background-color: #f00;
  margin-top: auto;
}

.card__text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
<div class="cards">
  <div class="card">
    <h3 class="card__title">Title</h3>
    <div class="card__dot"></div>
    <p class="card__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat dolore ea, placeat repellendus velit maxime dolores sint minima harum dolorem sequi, molestiae atque eveniet asperiores reiciendis cupiditate maiores. Enim, asperiores.</p>
  </div>
  <div class="card">
    <h3 class="card__title">Title<br> title</h3>
    <div class="card__dot"></div>
    <p class="card__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat dolore ea, placeat repellendus velit maxime dolores sint minima harum dolorem sequi, molestiae atque eveniet asperiores reiciendis cupiditate maiores. Enim, asperiores.</p>
  </div>
  <div class="card">
    <h3 class="card__title">Title</h3>
    <div class="card__dot"></div>
    <p class="card__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat dolore ea, placeat repellendus velit maxime dolores sint minima harum dolorem sequi, molestiae atque eveniet asperiores reiciendis cupiditate maiores. Enim, asperiores.</p>
  </div>
</div>

Пример 2

* {
  box-sizing: border-box;
}

table {
  width: 100%;
  table-layout: fixed;
}

table th,
table td {
  vertical-align: top;
  padding: .5rem;
}

table th {
  font-size: 1.75rem;
  text-align: left;
}

table .dot {
  width: .5rem;
  height: .5rem;
  background-color: #f00;
  margin-top: auto;
}
<table>
  <thead>
    <tr>
      <th>Title</th>
      <th>Title <br> title</th>
      <th>Title</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div class="dot"></div>
      </td>
      <td>
        <div class="dot"></div>
      </td>
      <td>
        <div class="dot"></div>
      </td>
    </tr>
    <tr>
      <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat dolore ea, placeat repellendus velit maxime dolores sint minima harum dolorem sequi, molestiae atque eveniet asperiores reiciendis cupiditate maiores. Enim, asperiores.</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipisicing</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat dolore ea, placeat repellendus velit maxime dolores sint minima harum dolorem sequi, molestiae atque eveniet asperiores reiciendis cupiditate maiores. Enim, asperiores.</td>
    </tr>
  </tbody>
</table>

0

ответ как бы на поверхности. отказаться от flex в пользу grid

#x{
display: grid;
grid-template-rows: 2em auto; /* !!! */
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 5px;
}

/* остальной css лишь для подсветки границ */
#x{--border: red;}
p{--border: green;}
b{--border: blue;}
p, b, #x{
border: 1px solid var(--border);
padding: 5px;
}
<div id='x'>
  <b>h 1</b>
  <b>h 2</b>
  <b>h 3</b>
  <b>h 4</b>
<p>
aaaaaaaaaaa<br/>
aaaaaaaaaaa<br/>
aaaaaaaaaaa<br/>
aaaaaaaaaaa<br/>
aaaaaaaaaaa
</p>
<p>
aaaaaaaaaaa<br/>
aaaaaaaaaaa
</p>
<p>
aaaaaaaaaaa<br/>
aaaaaaaaaaa<br/>
aaaaaaaaaaa
</p>
<p>
aaaaaaaaaaa<br/>
</p>
</div>

а вообще, заголовки у вас судя по скрину ведут себя крайне странно. будто им специально через :nth-child метрики рандомизировали... вставьте код для ясности что-ли...

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.