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 Tascan
      Всем привет.
      Слышал советы, что вместо пикселей желательно использовать rem для задания размеров. Решил, в качестве эксперимента, попробовать задать для html определённый размер в пикселях, а дальше везде использовать уже rem.
      И вроде всё нормально, даже очень удобно. Но под конец решил я уменьшить масштаб страницы и вот тут появились проблемы. Если использовать такой код:
      html { font-size: 10px; } .box { background: red; width: 100px; height: 400px; } То по итогу всё нормально, сколько масштаб не уменьшай, результат всё те же 400px.
      Но стоило изменить единицы измерения в высоте:
      html { font-size: 10px; } .box { background: red; width: 100px; height: 40rem; } И вот тут уже появляется проблема. При уменьшении масштаба страницы до 50% к размеру высоты: в Google Chrome и Yandex браузерах добавляется дополнительные 80px, в Opera итоговая высота элемента увеличивается до 960 px. А вот в Firefox всё нормально и по итогу выходят те же 400px.
      Подскажите в чём тут проблема? Это особенности rem или браузеров на основе WebKit?
      И вообще, я понимаю, что многие советуют явно высоту элементов не задавать, но если это необходимо, то какие единицы измерения посоветуете для этого использовать?
    • By kuzia007
      Пример сайта по разработке reactiq точка net 
      Цена на разработку 70 000 рублей. Без дизайна и верстки, от вас нам нужен функционал 
      на фреймворке Lavarel 
      Нужно постараться уложиться в 20 дней по срокам. 
      Работа по Сделке без риска. B и больше ни как. 

      Основные моменты работы сайта: 
      авторизация сайта через стим 
      считывания апи через официальный сайт pubg 
      Трейдов скинов и все остальное не будет! 
      подключить систему оплат 
      создание личного кабинета для пользователя. 
      Есть полное ТЗ проекта, которое мы готовы упрощать на первом этапе.
      Готовы достойно оплачивать ваш труд! 
      Пишите в телеграм @evgensalyah
  • Member Statistics

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

    No registered users viewing this page.



  • Спрашивают сейчас

  • Пишут сейчас

    • Когда есть с кем, и есть куда, хожу на настольный теннис. Когда два раза в неделю, а когда и два раза в месяц. Сейчас в универе, где мы играли, отпуска, а другие места или ужасные (плиточный пол, например), или рано закрываются. Самая проблема — это найти себе напарника своего уровня, готового регулярно заниматься. Энтузиазм почему-то есть только у тех, кто ещё только учится ракетку держать, а я держать уже могу, мне надо играть учиться.
    • Увеличилась. Не 1000 долларов, конечно, и в рублях, но семье есть, что покушать. Меня держит то, что я больше ничего не умею. Продавцом в супермаркете я не выдержу, с людьми взаимодействовать вообще не люблю, у меня для этого менеджер, с которым я тоже не люблю взаимодействовать. По образованию мне положено работать на заводе, но нас в универе не учили ничему, что помогло бы сразу пойти и работать, дали только некоторые теоретические азы, которые я давно забыл. А для качественной работы, я считаю, нужно иметь не азы, а понимание сути происходящего. Лично я вообще не научился понимать, зачем в цепи, скажем, резистор стоит, или где его нужно поставить и зачем. Особенно, когда нам начинали рассказывать, и у каждого резистора по 2-3 назначения, эдак поставишь его куда-нибудь, а он аукнется смещением постоянного напряжения где-то в другом конце схемы.
      Новые фреймворки, можно сказать, не учу, хотя надо бы, без них я работу сменить не смогу, если приспичит, но у меня не остаётся моральных сил после работы ещё что-то учить. Я даже на велосипеде ездить перестал.
      В программировании у меня, к сожалению, тоже азы с некоторой специализацией в вёрстке. Я не знаю многих тонкостей, и никогда, например, не углублялся в такие темы, где понадобились бы Reflection в PHP. Или, например, я люблю использовать SQL-запросы вместо ORM, потому что польза ORM для меня не пересиливает их многословность и косноязычность. Я, конечно, понимаю, что если следовать принятым стандартам, то потом легче дорабатывать код, но я пришёл в разработку из домашних проектиков, и так и не научился наслаивать абстракции ради стандартов. А, скажем, вебпак только позавчера стал поковыривать, чтобы понимать, что в нём вообще происходит, а то он сейчас везде. Настолько некрупные проекты у меня всегда были, что мне хватало отдельных JS-файликов.

      И вообще, когда я с условного Delphi переходил на веб, то меня привлекало то, что не нужно ничего компилировать, не нужно ничего ставить, можно лишь запустить блокнот, а браузер уже есть на любом компьютере. Теперь этого ничего уже нет, постоянно то npm, то composer, сборка vue, сборка scss, когда без vue. У питонщиков и ноды, так вообще, веб-сервер является частью проекта, и чтобы что-то исправить, надо его перезапускать, а не как в PHP, просто файлик подправить. Веб перестал быть простым.
    • Всем привет. Слышал советы, что вместо пикселей желательно использовать rem для задания размеров. Решил, в качестве эксперимента, попробовать задать для html определённый размер в пикселях, а дальше везде использовать уже rem. И вроде всё нормально, даже очень удобно. Но под конец решил я уменьшить масштаб страницы и вот тут появились проблемы. Если использовать такой код: html { font-size: 10px; } .box { background: red; width: 100px; height: 400px; } То по итогу всё нормально, сколько масштаб не уменьшай, результат всё те же 400px. Но стоило изменить единицы измерения в высоте: html { font-size: 10px; } .box { background: red; width: 100px; height: 40rem; } И вот тут уже появляется проблема. При уменьшении масштаба страницы до 50% к размеру высоты: в Google Chrome и Yandex браузерах добавляется дополнительные 80px, в Opera итоговая высота элемента увеличивается до 960 px. А вот в Firefox всё нормально и по итогу выходят те же 400px. Подскажите в чём тут проблема? Это особенности rem или браузеров на основе WebKit? И вообще, я понимаю, что многие советуют явно высоту элементов не задавать, но если это необходимо, то какие единицы измерения посоветуете для этого использовать?
  • Popular Contributors