2 пролетных элемента с окантовкой нижней линии - PullRequest
Новая
       10

2 пролетных элемента с окантовкой нижней линии

0 голосов
/ 13 июля 2020

У меня такая настройка: 

.productList {
  padding: 10px;
  width: 70%;
}

.prijzencontainer {
  flex: 1;
}

.price {
  margin-left: 50px;
}

.productblock {
  margin: auto;
  display: flex;
  justify-content: center;
}

.product {
  border-bottom: 1px dashed #aaa;
}

.product .name {
  font-weight: bold;
}

.product .price {
  float: right;
}

.product-header {
  margin-top: 10px;
}
<div class="prijzencontainer">
  <div class="productblock">
    <section class="productList">
      <div class=product-section>
        <div class=product-header>
          <h4>heading1</h4>
        </div>
        <div class="product">
          <span class="name">example text</span><span class="price">99 euro</span>
        </div>
      </div>
    </section>
  </div>
</div>

Проблема заключается в том, что когда экран становится слишком маленьким, ценовая часть div "product" попадает под пунктирную линию, как это.

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

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

1 Ответ

0 голосов
/ 13 июля 2020

Вместо использования float вы можете использовать flexbox на div .product

.product {
  border-bottom: 1px dashed #aaa;
  justify-content: space-between;
}

Теперь вы можете удалить margin-left и float из цены. 

.productList {
  padding: 10px;
  width: 70%;
}
.prijzencontainer{
  flex: 1;
}

.productblock{
  margin: auto;
 display: flex;
 justify-content: center;
}
.product {
  border-bottom: 1px dashed #aaa;
  display: flex;
  justify-content: space-between;
}
.product .name {
  font-weight: bold;
}

.price {
  flex: 0 0 50px;
  text-align: right;
}
.product-header {
  margin-top: 10px;
}
<div class="prijzencontainer">
  <div class="productblock">
    <section class="productList">
      <div class=product-section>
        <div class=product-header>
          <h4>heading1</h4>
        </div>
        <div class="product">
          <span class="name">example text</span><span class="price">99 euro</span>
        </div>         
      </div>
    </section>
  </div>    
</div>
...