我想展示像不同围栏的产品。我想我不知道我的问题是什么，但我正在显示类似此图片的产品

Question

我想展示像不同围栏的产品。我想我不知道我的问题是什么，但是我正在显示类似此图片的产品：

我试图进行引导，但没有反应。

我的代码是：

<div class="col-md-2 column productbox">
    <img src="http://placehold.it/460x250/e67e22/ffffff&text=HTML5"  class="img-responsive">
    <div class="producttitle">Product 2</div>
    <div class="productprice">
        <div class="pull-right"><a href="#" class="btn btn-danger btn-sm" role="button">BUY</a></div>
        <div class="pricetext">£8.95</div>
    </div>
</div>
<div class="col-md-2 column productbox">
    <img src="http://placehold.it/460x250/e67e22/ffffff&text=HTML5" class="img-responsive">
    <div class="producttitle">Product 2</div>
    <div class="productprice">
        <div class="pull-right"><a href="#" class="btn btn-danger btn-sm" role="button">BUY</a></div>
        <div class="pricetext">£8.95</div>
    </div>
</div>
<div class="col-md-2 column productbox">
    <img src="http://placehold.it/460x250/e67e22/ffffff&text=HTML5" class="img-responsive">
    <div class="producttitle">Product 3</div>
    <div class="productprice">
        <div class="pull-right"><a href="#" class="btn btn-danger btn-sm" role="button">BUY</a></div>
        <div class="pricetext">£8.95</div>
    </div>
</div>
<div class="col-md-2 column productbox">
    <img src="http://placehold.it/460x250/e67e22/ffffff&text=HTML5" class="img-responsive">
    <div class="producttitle">Product 4</div>
    <div class="productprice">
        <div class="pull-right"><a href="#" class="btn  btn-danger btn-sm" role="button">BUY</a></div>
        <div class="pricetext"> £8.95</div>
    </div>
</div>

有人可以帮助我吗？

谢谢

Answer 1

您可以使用CSS3 Flexbox属性来实现。 Here  是链接。

* {box-sizing: border-box}
body {margin: 0}

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.column img {
  display: block;
  width: 100%;
  margin-top: 8px;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}

<div class="row"> 
  <div class="column">
    <img src="https://www.w3schools.com/w3images/wedding.jpg" alt="">
    <img src="https://www.w3schools.com/w3images/rocks.jpg" alt="">
    <img src="https://www.w3schools.com/w3images/falls2.jpg" alt="">
    <img src="https://www.w3schools.com/w3images/paris.jpg" alt="">
    <img src="https://www.w3schools.com/w3images/nature.jpg" alt="">
    <img src="https://www.w3schools.com/w3images/mist.jpg" alt="">
    <img src="https://www.w3schools.com/w3images/paris.jpg" alt="">
  </div>
  <div class="column">
    <img src="https://www.w3schools.com/w3images/underwater.jpg" alt="">
    <img src="https://www.w3schools.com/w3images/ocean.jpg" alt="">
    <img src="https://www.w3schools.com/w3images/wedding.jpg" alt="">
    <img src="https://www.w3schools.com/w3images/mountainskies.jpg" alt="">
    <img src="https://www.w3schools.com/w3images/rocks.jpg" alt="">
    <img src="https://www.w3schools.com/w3images/underwater.jpg" alt="">
  </div>  
  <div class="column">
    <img src="https://www.w3schools.com/w3images/wedding.jpg" alt="">
    <img src="https://www.w3schools.com/w3images/rocks.jpg" alt="">
    <img src="https://www.w3schools.com/w3images/falls2.jpg" alt="">
    <img src="https://www.w3schools.com/w3images/paris.jpg" alt="">
    <img src="https://www.w3schools.com/w3images/nature.jpg" alt="">
    <img src="https://www.w3schools.com/w3images/mist.jpg" alt="">
    <img src="https://www.w3schools.com/w3images/paris.jpg" alt="">
  </div>
  <div class="column">
    <img src="https://www.w3schools.com/w3images/underwater.jpg" alt="">
    <img src="https://www.w3schools.com/w3images/ocean.jpg" alt="">
    <img src="https://www.w3schools.com/w3images/wedding.jpg" alt="">
    <img src="https://www.w3schools.com/w3images/mountainskies.jpg" alt="">
    <img src="https://www.w3schools.com/w3images/rocks.jpg" alt="">
    <img src="https://www.w3schools.com/w3images/underwater.jpg" alt="">
  </div>
</div>