Что сделать чтоб цена была сверху?

227

15 июня 2018, 15:10

body { 
  font-family: 'Open Sans', sans-serif; 
} 
 
.title { 
  font-size: 18pt; 
} 
 
.categorie { 
  font-size: 12pt; 
} 
 
.price { 
  padding-left: 250px; 
} 
 
.product:first-child { 
  padding-top: 150px; 
} 
 
.product { 
  padding-top: 30px; 
}

<div class="container"> 
  <img src="" alt=""> 
  <div class="product"> 
    <div class="title"><a href="product.php?id=1">Жесткий диск</a></div> 
    <div class="categorie"><a href="index.php?cat=1">Компьютеры</a></div> 
    <div class="price">Договорная</div> 
  </div> 
  <div class="product"> 
    <div class="title"><a href="product.php?id=2">Жесткий диск</a></div> 
    <div class="categorie"><a href="index.php?cat=1">Компьютеры</a></div> 
    <div class="price">Договорная</div> 
  </div> 
  <div class="product"> 
    <div class="title"><a href="product.php?id=3">Жесткий диск</a></div> 
    <div class="categorie"><a href="index.php?cat=1">Компьютеры</a></div> 
    <div class="price">Договорная</div> 
  </div> 
  <div class="product"> 
    <div class="title"><a href="product.php?id=4">xbox 360</a></div> 
    <div class="categorie"><a href="index.php?cat=1">Компьютеры</a></div> 
    <div class="price">Договорная</div> 
  </div> 
  <div class="product"> 
    <div class="title"><a href="product.php?id=5">xbox 360</a></div> 
    <div class="categorie"><a href="index.php?cat=1">Компьютеры</a></div> 
    <div class="price">Договорная</div> 
  </div> 
  <div class="product"> 
    <div class="title"><a href="product.php?id=6">xbox 360</a></div> 
    <div class="categorie"><a href="index.php?cat=2">Игровые приставки</a></div> 
    <div class="price">Договорная</div> 
  </div> 
  <div class="product"> 
    <div class="title"><a href="product.php?id=7">Gtx 1050 ti</a></div> 
    <div class="categorie"><a href="index.php?cat=1">Компьютеры</a></div> 
    <div class="price">Договорная</div> 
  </div> 
  <div class="product"> 
    <div class="title"><a href="product.php?id=8">ФЫЫФЫ</a></div> 
    <div class="categorie"><a href="index.php?cat=1">Компьютеры</a></div> 
    <div class="price">1000</div> 
  </div>2<a href="index.php?page=1">1 </a><a href="index.php?page=2">2 </a></div>

Answer 1

Добавил div и чуть-чуть стилей:

.product { 
  display: flex; 
  flex-direction: row; 
  margin: 10px 0; 
} 
 
.price { 
  padding: 0 20px; 
} 
 
.product img { 
  margin-right: 10px; 
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"> 
<div class="container"> 
  <div class="product"> 
    <img src="http://placehold.it/100x100" alt=""> 
    <div> 
      <div class="title"><a href="">Жесткий диск</a></div> 
      <div class="categorie"><a href="">Компьютеры</a></div> 
    </div> 
    <div class="price">Договорная</div> 
  </div> 
  <div class="product"> 
    <img src="http://placehold.it/100x100" alt=""> 
    <div> 
      <div class="title"><a href="">Жесткий диск</a></div> 
      <div class="categorie"><a href="">Компьютеры</a></div> 
    </div> 
    <div class="price">Договорная</div> 
  </div> 
  <div class="product"> 
    <img src="http://placehold.it/100x100" alt=""> 
    <div> 
      <div class="title"><a href="">Жесткий диск</a></div> 
      <div class="categorie"><a href="">Компьютеры</a></div> 
    </div> 
    <div class="price">Договорная</div> 
  </div> 
  <div class="product"> 
    <img src="http://placehold.it/100x100" alt=""> 
    <div> 
      <div class="title"><a href="">Жесткий диск</a></div> 
      <div class="categorie"><a href="">Компьютеры</a></div> 
    </div> 
    <div class="price">Договорная</div> 
  </div> 
  <div class="product"> 
    <img src="http://placehold.it/100x100" alt=""> 
    <div> 
      <div class="title"><a href="">Жесткий диск</a></div> 
      <div class="categorie"><a href="">Компьютеры</a></div> 
    </div> 
    <div class="price">Договорная</div> 
  </div>