在网格中排列内容时避免多行

时间：2017-10-29 16:38:24

标签： html css

我目前有一个显示产品的网格。全屏有3种产品，一旦屏幕变小，就会显示4种产品。

我的问题是，产品的某些名称比其他产品更长。在此示例中，随着容器变小，第2个和第3个项目的产品名称将更快地移动到新行，然后是第1个项目。

enter image description here

理想情况下，当发生这种情况时，我希望Price和SHOP按钮相互平衡。

我能想到实现这一目标的唯一方法是为图片，名称和价格/按钮分别设置3行。通过这样做，它使第4项很难很好地显示，而不是为不同的窗口大小制作完全独立的容器并加载图像两次。

有没有人对如何在不为每个项目制作多行的情况下实现这一目标有任何想法？

＆＃13;
＆＃13; 
*, input, :before, :after {
  box-sizing: border-box;
}

h2.product-header {
  font-family: "Open Sans", sans-serif;
  font-size: 23px;
  color: #231f20;
  letter-spacing: 3px;
  text-align: center;
  padding-bottom: 50px;
  border-bottom: 2px solid #c2c1c5;
}

.row {
  display: block;
  font-size: 0;
}

.row .grid {
  vertical-align: top;
  display: inline-block;
  font-size: 18px;
}
.grid.one-third {
  width: 33.33%;
}

#index-new-arrivals {
  font-family: "Open Sans", sans-serif;
  padding: 75px 50px;
}
#index-new-arrivals .grid {
  width: 33.33%;
}

#index-new-arrivals .grid.product {
  margin: 75px 0 15px 0;
  padding: 0 7%;
}

#index-new-arrivals .grid.product:last-child { display:none;}

#index-new-arrivals .grid.product > div {
  padding-bottom: 150%;
  position: relative;
}
#index-new-arrivals .grid.product > div > div {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
}
#index-new-arrivals .grid.product-name {
  margin-bottom: 15px;
  padding: 0 7%;
  vertical-align: middle;
}
#index-new-arrivals .grid.product h3 {
  font-size: 18px;
  text-align: center;
  margin-top: 25px;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: #231f20;
  font-size: 19px;
}
#index-new-arrivals .grid.product p {
  font-size: 18px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: #231f20;
  font-size: 19px;
}
#index-new-arrivals .grid.product a {
  font-size: 15px;
  letter-spacing: 2px;
  display: block;
  background-color: #3e3e3f;
  max-width: 230px;
  width: 80%;
  margin: 25px auto 100px auto;
  padding: 15px 0;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
}


@media (max-width:880px) {
  #index-new-arrivals .grid {
  width: 50%;
}
#index-new-arrivals .grid.product:last-child { display:inline-block;}


}
＆＃13; 
<section id="index-new-arrivals">

  <div class="row" style="border:1px solid blue;">

    <div class="grid product" style="border:1px solid grey;">
      <div>
        <div style="background-image:url('//cdn.shopify.com/s/files/1/2497/8510/products/9126_BROWN_1_500x.jpg?v=1509207888');"></div>
      </div>
      <h3>Convertible Belt Bag</h3>
      <p>$50</p>
      <a href="#">Shop</a>
    </div>

    <div class="grid product" style="border:1px solid grey;">
      <div>
        <div style="background-image:url('//cdn.shopify.com/s/files/1/2497/8510/products/9113_BLACK_500x.jpg?v=1509207748');"></div>
      </div>
      <h3>Mini Quilted Backpack</h3>
      <p>$54</p>
      <a href="#">Shop</a>
    </div>

    <div class="grid product" style="border:1px solid grey;">
      <div>
        <div style="background-image:url('//cdn.shopify.com/s/files/1/2497/8510/products/9155_IVORY_1_500x.jpg?v=1509207616');"></div>
      </div>
      <h3>Snake Mini Reversible Tote</h3>
      <p>$50</p>
      <a href="#">Shop</a>
    </div>
    
    <div class="grid product" style="border:1px solid grey;">
      <div>
        <div style="background-image:url('//cdn.shopify.com/s/files/1/2497/8510/products/9155_IVORY_1_500x.jpg?v=1509207616');"></div>
      </div>
      <h3>Snake Mini Reversible Tote</h3>
      <p>$50</p>
      <a href="#">Shop</a>
    </div>

  </div>
  
  
</section>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

您可以修改名称h3 element max-height并使用这些css属性在文本大于h3后显示点：

white-space: pre;
overflow: hidden !important;
text-overflow: ellipsis;


*, input, :before, :after {
  box-sizing: border-box;
}

h2.product-header {
  font-family: "Open Sans", sans-serif;
  font-size: 23px;
  color: #231f20;
  letter-spacing: 3px;
  text-align: center;
  padding-bottom: 50px;
  border-bottom: 2px solid #c2c1c5;
}

.row {
  display: block;
  font-size: 0;
}

.row .grid {
  vertical-align: top;
  display: inline-block;
  font-size: 18px;
}
.grid.one-third {
  width: 33.33%;
}

#index-new-arrivals {
  font-family: "Open Sans", sans-serif;
  padding: 75px 50px;
}
#index-new-arrivals .grid {
  width: 33.33%;
}

#index-new-arrivals .grid.product {
  margin: 75px 0 15px 0;
  padding: 0 7%;
}

#index-new-arrivals .grid.product:last-child { display:none;}

#index-new-arrivals .grid.product > div {
  padding-bottom: 150%;
  position: relative;
}
#index-new-arrivals .grid.product > div > div {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
}
#index-new-arrivals .grid.product-name {
  margin-bottom: 15px;
  padding: 0 7%;
  vertical-align: middle;
}
#index-new-arrivals .grid.product h3 {
  font-size: 18px;
  text-align: center;
  margin-top: 25px;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: #231f20;
  font-size: 19px;
  white-space: pre;
  overflow: hidden !important;
  text-overflow: ellipsis;
}
#index-new-arrivals .grid.product p {
  font-size: 18px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: #231f20;
  font-size: 19px;
}
#index-new-arrivals .grid.product a {
  font-size: 15px;
  letter-spacing: 2px;
  display: block;
  background-color: #3e3e3f;
  max-width: 230px;
  width: 80%;
  margin: 25px auto 100px auto;
  padding: 15px 0;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
}


@media (max-width:880px) {
  #index-new-arrivals .grid {
  width: 50%;
}
#index-new-arrivals .grid.product:last-child { display:inline-block;}


}
<section id="index-new-arrivals">

  <div class="row" style="border:1px solid blue;">

    <div class="grid product" style="border:1px solid grey;">
      <div>
        <div style="background-image:url('//cdn.shopify.com/s/files/1/2497/8510/products/9126_BROWN_1_500x.jpg?v=1509207888');"></div>
      </div>
      <h3>Convertible Belt Bag</h3>
      <p>$50</p>
      <a href="#">Shop</a>
    </div>

    <div class="grid product" style="border:1px solid grey;">
      <div>
        <div style="background-image:url('//cdn.shopify.com/s/files/1/2497/8510/products/9113_BLACK_500x.jpg?v=1509207748');"></div>
      </div>
      <h3>Mini Quilted Backpack</h3>
      <p>$54</p>
      <a href="#">Shop</a>
    </div>

    <div class="grid product" style="border:1px solid grey;">
      <div>
        <div style="background-image:url('//cdn.shopify.com/s/files/1/2497/8510/products/9155_IVORY_1_500x.jpg?v=1509207616');"></div>
      </div>
      <h3>Snake Mini Reversible Tote</h3>
      <p>$50</p>
      <a href="#">Shop</a>
    </div>
    
    <div class="grid product" style="border:1px solid grey;">
      <div>
        <div style="background-image:url('//cdn.shopify.com/s/files/1/2497/8510/products/9155_IVORY_1_500x.jpg?v=1509207616');"></div>
      </div>
      <h3>Snake Mini Reversible Tote</h3>
      <p>$50</p>
      <a href="#">Shop</a>
    </div>

  </div>
  
  
</section>

相关问题
最新问题