four17

Выравнивание блоков на одном уровне

Recommended Posts

Можно ли с помощью css выровнять блоки одинакового по уровню ? 

вот картинка.

 image.thumb.png.0c7c7ea07834333899168987a8f0d97a.png

Высота блока должна быть не фиксированной .Контент может быть  в любом количестве . Блоки с контентом должны быть на одном уровне .  Т.е независимо сколько символом в контенте , описание строго на одном уровнем с другим  описание  , цена на одном уровне с ценой.

Каким способом можно реализовать данное решение ? спасибо за внимание.

Share this post


Link to post
Share on other sites

да пробовал через флекс .не получается . и в инете решения пока не нашел . 

Share this post


Link to post
Share on other sites

Примерно вот такой принцип. https://codyhouse.co/ds/components/app/pricing-table
Единственное, заголовку придётся высоту указывать. И я бы ещё поставил text-overflow: ellipsis

Т.е. обычный flex, последнему элементу margin-top: auto; чтобы к низу прибивался. 

Или можно описание растягивать. flex-grow: 3; например, указать. Как нибудь так. 

Share this post


Link to post
Share on other sites
4 часа назад, four17 сказал:

да пробовал через флекс .не получается

Плохо пробовали. :)  Черновой вариант:

<div class="wrap">
  <div class="card">
    <div class="card_header">Header</div>
    <div class="card_text">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi tempore incidunt obcaecati impedit nihil consequatur numquam magni perferendis, quasi voluptatem fugit ex iusto adipisci perspiciatis quos et, accusantium deleniti non.
    </div>
    <div class="card_price">
      <div class="card_price-now">9999</div>
      <div class="card_price-old">99</div>
    </div>
  </div>
  
  <div class="card">
    <div class="card_header">Header</div>
    <div class="card_text">
      Lorem ipsum dolor sit amet consectetur adipisicing elit.
    </div>
    <div class="card_price">
      <div class="card_price-now">9999</div>
      <div class="card_price-old">99</div>
    </div>
  </div>
</div>
.wrap {
  display: flex;
}
.card {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex-basis: 200px;
  border: 1px solid #000;
  justify-content: space-between;
  align-items: center;
}
.card_price {
  display: flex;
  flex-direction: column;
  align-items: center;
}

 

Share this post


Link to post
Share on other sites
10 минут назад, AlexZaw сказал:

Плохо пробовали. :)  Черновой вариант:


<div class="wrap">
  <div class="card">
    <div class="card_header">Header</div>
    <div class="card_text">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi tempore incidunt obcaecati impedit nihil consequatur numquam magni perferendis, quasi voluptatem fugit ex iusto adipisci perspiciatis quos et, accusantium deleniti non.
    </div>
    <div class="card_price">
      <div class="card_price-now">9999</div>
      <div class="card_price-old">99</div>
    </div>
  </div>
  
  <div class="card">
    <div class="card_header">Header</div>
    <div class="card_text">
      Lorem ipsum dolor sit amet consectetur adipisicing elit.
    </div>
    <div class="card_price">
      <div class="card_price-now">9999</div>
      <div class="card_price-old">99</div>
    </div>
  </div>
</div>

.wrap {
  display: flex;
}
.card {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex-basis: 200px;
  border: 1px solid #000;
  justify-content: space-between;
  align-items: center;
}
.card_price {
  display: flex;
  flex-direction: column;
  align-items: center;
}

 

Спасибо , но  такой результат у меня тоже получался  ))

А нужно чтобы например описание было на одном уровне с другим описание и выровнялась к топу. как то так(

  

Share this post


Link to post
Share on other sites
20 минут назад, four17 сказал:

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

Тогда попробуйте грид. Ну либо задайте для заголовка минимальную высоту.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Valery Subbotin
      Здравствуйте, подскажите пожалуйста как избавиться от отступов в тексте, чтобы границы блока обтекали текст пиксель в пиксель.
      Все padding-и разумеется убрал, но непонятный зазор между границей блока и текстом все ровно остался.

    • By freeodmin2
      Друзья, всем привет. Я учусь верстать, и вот не могу разобраться сейчас, как сверстать такой элемент
      на десктопе 4 блока в ряд. на мобиле 4 блока в столбик.
      как бы проблемы с вёрсткой блока нет, как и с медиа запросом, чтобы на мобильнике их сделать в ряд.
      но как сверстать этот угол? да еще так, чтобы у всего этого блока была тень. вот как сверстать такую фигуру с закруглением всех углов на 10 пикселей и добавлением тени?
      помогите плиз кодом
      всем заранее спасибо за участие
      вот картинка для наглядности

  • Member Statistics

    46,421
    Total Members
    3,128
    Most Online
    Openair
    Newest Member
    Openair
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.