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 alexanderPoiu
      Подскажите пожалуйста. Коньент с картинкой и абзацем скрываются под футером.

  • Member Statistics

    46,389
    Total Members
    3,128
    Most Online
    Неугомонный
    Newest Member
    Неугомонный
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.



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

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

    • https://jsfiddle.net/q2Lfaew5/2/ Пытаюсь добавить иконку к ссылке. Казалось бы, довольно простая задача, но есть несколько условностей, из-за которых пока ничего не получается. 1) Текст должен быть inline-элементом. Для того, чтобы к каждой строке применялась граница, и пустота в них была не кликабельной (как в первом примере). 2) Иконка всегда должна быть вертикально отцентрированная. Реально ли это сделать?
    • Здравствуйте. Почему в этом примере https://jsfiddle.net/pk2rgj3o/4/ в IE11 не срабатывает max-width для изображения? Мне нужно, чтобы фото не выходило за пределы родителя, при этом его ширина и ширина flex-item оставались автоматическими. В данный момент я нашел два решения этой проблемы: 1) width: 100% для фото и 2) flex: 1 для flex-item, но они оба не подходят.
    • Задаю контенту фиксированную высоту, но все равно он под футером. Вы не знаете, лучше оставить высоту футера auto?   <main class="project">
          
          <div class="blog-container">
              <div class="blog-header">
                  <div class="blog-cover">
                      
                  </div>
              </div>
              <div class="blog-body">
                  <div class="blog-title">
                      <h1><a href="#">Lorem ipsum dolor sit amet</a></h1>
                  </div>
                  <div class="blog-text"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque sapiente quae enim eius sit ratione doloremque, non quo, quaerat soluta sint aspernatur nostrum doloribus dolor perferendis saepe numquam molestiae rerum. Iusto explicabo molestias cumque expedita officia repellendus excepturi vitae iure.</p>
                  </div>
                  <div class="blog-tags">
                      <ul>
                          <li><a href="#">Lorem</a></li>
                          <li><a href="#">ipsum</a></li>
                          <li><a href="#">dolar</a></li>
                          <li><a href="#">consectetur</a></li>
                      </ul>
                  </div>
              </div>
              <div class="blog-footer">
                  <ul>
                      <li class="published-date">4 days ago</li>
                  </ul>
              </div>
          </div>     
      </main> <footer>
          
      <nav>
          
      <a href="index.html">HOME</a>
                      <a href="projects.html">PROJECTS</a>
                      <a href="blog.html">BLOG</a>
                      <a href="contact.html">CONTACT</a>
                      <a href="about.html">ABOUT</a>
                      <a href="services.html">SEVICES</a>
                      <a href="location.html">LOCATION</a>
                       </nav>
      <div class="logo">
          <a href="index.html"><img class="graphiclogo" src="logo.png" alt="logo"></a>
      </div>
      <div class="social">
          <a href="#"><img src="img/social/em.png" alt="em"></a>
          <a href="#"><img src="img/social/face.png" alt="em"></a>
          <a href="#"><img src="img/social/goo.png" alt="em"></a>
          <a href="#"><img src="img/social/inst.png" alt="em"></a>
          <a href="#"><img src="img/social/pint.png" alt="em"></a> </div> <p>Version 2019</p>
      </footer>
          <script src="js/script.js"></script>
      </body>                     .blog-container {
          background: #fafafa;
          border-radius: 5px;
          box-shadow: rgba(0,0,0,0.2) 0 4px 2px -2px;
          font-weight: 100;
          margin: 48px auto;
          margin-bottom: 100px;
          width: 50rem;
          height: 20px; } footer {
          width: 100%;
          height: auto;
          background: black;
          margin: 0 auto;
          text-align: center;
          padding-top: 25px;
          position:absolute; 
          bottom:0
      }
  • Popular Contributors