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类，它左移并将所有图像放在其中，但每个图像都是垂直的。但我希望它是画廊视图或网格视图。我该怎么做？有什么想法吗？

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;
}

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

如果您希望它更完美地对齐，您可能也希望每个产品都具有固定的高度。

的问候，
Shakib

html中产品的图库视图

1 个答案: