2

На изображении изображены три блока, выровненные горизонтально:

1) изображение, 2) описание, 3) цена

введите сюда описание изображения

Подскажите, как правильно сверстать такой блок?
Проблема возникает в вертикальным выравниванием текста, т.е. прижатие его книзу. Высоту для блоков нельзя ставить, т.к. будет адаптив

ul{padding: 0;}
li {
    box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
    margin-bottom: 20px;
    clear: both;
    overflow: hidden;
    padding-right: 20px;
}
li> div {
    vertical-align: top;
    float: left;
}
li > div:nth-child(3) {
    float: right;
}

.img {
    font-size: 0;
}

.desc {
    position: relative;
    height: 100%;
    padding-left: 20px;
    padding-top: 10px;
}

h3 {
    font-family: "Open Sans";
    font-size: 20px;
    font-weight: bold;
}
h3 a {
    color: #3a485b;
    text-decoration: none;
}
.desc-feature div {
    float: left;
}

.desc-feature div + div {
    margin-left: 20px;
}
.price {
    position: relative;
}

p {
    font-size: 14px;
    font-weight: normal;
    color: #999;
}

.stock {
    padding-top: 63px;
}
<ul>
  <li>
    <div class="img">
      <a href="#">
        <img src="https://thumbs.dreamstime.com/t/%D0%B7%D0%B0%D1%85%D0%BE%D0%B4-%D1%81%D0%BE%D0%BB%D0%BD%D1%86%D0%B0-%D0%B4%D0%BE%D0%BC%D0%B0-%D1%80%D1%83%D0%BA%D0%B8-17324886.jpg" alt="">
      </a>
    </div>
    <div class="desc">
      <div class="top">
        <h3><a href="#">Tesla S 75D</a></h3>
      </div>
      <div class="desc-feature">
        <div class="year">
          <span>Год: <strong>2017</strong></span>
        </div>
        <div class="milage">
          <span>Пробег: <strong>50 km</strong></span>
        </div>
      </div>
    </div>
    <div class="price">
      <strong>1000 $</strong>
      <div class="stock">
        <i></i>
        <span>В наличии</span>
      </div>
    </div>
  </li>
</ul>

3
  • данный вопрос в виде картинки следует закрыть, потому что он бесполезен для базы знаний (тот, у кого возникнет подобный вопрос, не сможет найти данный вопрос и ответы к нему) 12 июн 2017 в 21:39
  • @alexander barakin, а где вопрос в виде картинки?
    – word
    13 июн 2017 в 19:33
  • ваши слова также бесполезны без способа решения для базы знаний
    – word
    13 июн 2017 в 19:35

2 ответа 2

4

Как вариант, с помощью flex:

* {
  box-sizing: border-box;
}

.clr:before,
.clr:after,
.row:before,
.row:after {
    content: " ";
    display: table;
}

.clr:after,
.row:after {
    clear: both;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

p {
   font-size: 14px;
   font-weight: normal;
   color: #999;
}

span {
  white-space: nowrap;
}

.product__title {
  font-family: "Open Sans";
  font-size: 20px;
  font-weight: bold;
  margin: 0;
}

.product__title a {
  color: #3a485b;
  text-decoration: none;
}

.product__item {
  overflow: hidden;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  margin-bottom: 20px;
  
  display: flex;
  flex-flow: row nowrap;
}

.product__img a,
.product__img img{
  display: block;
}

.product__desc {
  padding: 10px 10px 10px 20px;
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}

.product__desc-left,
.product__desc-right{
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
}

@media screen and (max-width: 520px) {
  .product__item {
    flex-flow: column nowrap;
  }
}
<ul class="product__list">
  <li class="product__item">
    <div class="product__img">
        <a href="#">
            <img src="https://thumbs.dreamstime.com/t/%D0%B7%D0%B0%D1%85%D0%BE%D0%B4-%D1%81%D0%BE%D0%BB%D0%BD%D1%86%D0%B0-%D0%B4%D0%BE%D0%BC%D0%B0-%D1%80%D1%83%D0%BA%D0%B8-17324886.jpg" alt="">
        </a>
    </div>
  
    <div class="product__desc">
        <div class="product__desc-left">
            <h3 class="product__title"><a href="#">Tesla S 75D</a></h3>
          
            <div class="desc-feature">
              <span class="year">Год: <strong>2017</strong></span>
              <span class="milage">Пробег: <strong>50 km</strong></span>
            </div>
        </div>
      
        <div class="product__desc-right">          
          <div class="product__price">
            <strong>1000 $</strong>              
          </div>

          <div class="product__stock">
            <i></i>
            <span>В наличии</span>
          </div>
        </div>
    </div>    
  </li>
</ul>

2

На скорую руку с флекс

<div class="wrap">
  <div class="block1">
    <img src="http://brightcove.vo.llnwd.net/e1/pd/1078702682/1078702682_5216442493001_5216425414001-vs.jpg?pubId=1078702682" alt="" />
  </div>
  <div class="block2">
    <h3>Supercar 3000</h3>
    <span class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus, illo.</span>
  </div>
  <div class="block3">
    <span class="price">$1000</span>
    <span class="instok">В наличии</span>
  </div>
</div>


* {
  box-sizing: border-box;
}
.wrap {
  width: 800px;
  margin: auto;
  display: flex;
  border: solid 1px #cccccc;
}
.wrap img {
  width: 200px;
  height: 100%;
}
.block2 h3 {
  margin: 0;
}
.block2 {
  padding: 0 10px;
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
}
.block2 .desc {
  display: block;
}
.block3 {
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
  border-left: 1px solid #cccccc;
  padding: 0 10px;
}

Ваш ответ

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

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