0

Помогите пожалуйста советом, как сверстать данную секцию?
Пробовал через афтер,но цена потом все равно остается снизу: введите сюда описание изображения

   .block1 {
        width: 50%;
    }
    .block1 .p1:after {
        content: '';
        display: block;
        height: 2px;
      background-color: green;
      width: 20%;
    margin-left: 40%;
    }
Амыр Челоков
  • 1
  • 2
    таки где изображение? – slippyk Apr 02 '18 at 13:08
  • 2 колонки можно сделать через column-count: 2. Ячейчки flex - полоска до цены блок с flex-grow:1. Как-то так... – Дмитрий Мирошниченко Apr 02 '18 at 13:29
  • 4
    данный вопрос в виде картинки следует закрыть, потому что он бесполезен для базы знаний (тот, у кого возникнет подобный вопрос, не сможет найти данный вопрос и ответы к нему) – aleksandr barakin Apr 13 '21 at 19:52

2 Answers2

5

Решение на основе этого топика

.item {
  display: flex;
  flex-direction: row;
}

.item-title{
  display: flex;
  flex-direction: column;
  flex: 1;
}


.item-name{
  display: flex;
  font-weight: bold;
}


.item-name:after {
  content: '';
  flex-grow: 1;
  margin: 0px 25px;
  background-size: 100% 1px;
  background-position: 0% 100%;
  background-repeat: repeat-x;
  background-image: linear-gradient(to left, #000, #000);
}


.item-ingredients {
  font-style: italic;
  font-size: 0.8rem;
}


.item-price {
  font-weight: bold;
}
<div class="item">
  <div class="item-title">
    <div class="item-name">Lorem ipsum dolor sit amet</div>
    <div class="item-ingredients">Lorem ipsum dolor sit amet</div>
    </div>
  <div class="item-price">$50</div>
</div>

2 вариант - с border-bottom

.item {
  display: flex;
  flex-direction: row;
}

.item-title{
  display: flex;
  flex-direction: column;
  flex: 1;
}


.item-name{
  display: flex;
  font-weight: bold;
}


.item-name:after {
  content: '';
  flex-grow: 1;
  margin: 0px 25px;
  border-bottom: 1px solid #000;
}


.item-ingredients {
  font-style: italic;
  font-size: 0.8rem;
}


.item-price {
  font-weight: bold;
}
<div class="item">
  <div class="item-title">
    <div class="item-name">Lorem ipsum dolor sit amet</div>
    <div class="item-ingredients">Lorem ipsum dolor sit amet</div>
    </div>
  <div class="item-price">$50</div>
</div>
Heidel
  • 3,197
1

@import url('https://fonts.googleapis.com/css?family=Open+Sans');
* {
  margin: 0;
  padding: 0;
}
body
{
font-family:"Open Sans", sans-serif;
}
.product {
  font-size:0.8em;
  font-weight:600;
  display: flex;
  justify-content: space-between;
}
.h3 {
  font-weight:800;
    font-size: 2em;

}
.product .line {
  border: none;
  border-bottom: 1px solid #ccc;
  flex-basis: 100%;
  align-self: center;
}
.product .desc {
  align-self: center;
  flex-basis: 60% px;
}
.product .price {
  align-self: center;
}
<div class="product">
   <div class="desc">
      <h3>Title</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae illum id reiciendis, laudantium amet consectetur hic iste aut aliquam asperiores error magnam voluptate ut recusandae! Magni autem sit tenetur sed.</p>

   </div>
   <div class="line"></div>
      <div class="price">
      400$
   </div>
</div>