css - html 中产品的图库 View

Question

我有以下内容作为第一个内容

#content {
    border-radius: 5px;  
    background:#FFFFFF; 
    text-align:left; 
    padding:20px 20px 5px; 
    margin:15px 0 15px 0;
}

在它们里面我有两个 div，它们都向左浮动，如下所示:

  <div id="content">
    <div class="my_left_menu">
      //this floats left
     </div>
     <div class="my_right_content">
      //this also floats left
     </div>
  </div>

现在在正确的内容中，我想要一个产品画廊，就像在线购物网站上显示的那样。所以我创建了另一个向左浮动的 div 类，并将所有图像放在其中，但每个图像都是垂直的。但我希望它是画廊 View 或网格之类的 View 。我该怎么做 ？有什么想法吗？

Answer 1

如果我没理解错的话，您想在右侧的 div 上显示类似网格的产品列表，即 div.my_right_content，但它们是垂直显示的。

基本上您需要做的是告诉内部 div 标签哪些是您的产品不要占据所有可用宽度。一种简单的方法是给它们一个固定的宽度，如果调整浏览器的大小或者您的页面显示在较小的屏幕上，那么它们可以垂直对齐以便为您的内容留出足够的空间。以下是您可以执行的操作:

<div id="content">
   <div class="left-col">
   </div>
   <div class="right-col">
      <div class="product">
      ... your product info and content
      </div>
      <div class="product">
      ... your product info and content
      </div>
   </div>
</div>

然后给他们一个这样的样式规则

.product {
   width: 100%;
   max-width: 200px;
   display: inline-block;
}

因此它们将水平对齐，当浏览器宽度不足以水平放置两个 200 像素宽的产品时，它们将垂直对齐。这也意味着，如果您的 .right-col 容器的宽度为 600 像素，它将在每行中容纳三个产品。

如果您想让它更完美地对齐，您可能还想为每个产品指定一个固定的高度。

问候，
沙基布