Question

我正在尝试使用HTML和CSS3创建一个页面，不幸的是，我最后一次编写CSS3还不是什么好事。我试图将图像放在反应网格中，但是这个网格看起来像这样：

正如您所看到的其他项目没有显示，因为我认为它没有足够的空间，这里是我正在使用的响应式CSS代码：

这是我在DIV上使用的CSS：

.portfolio-section {
}
.portfolio-box {
    position:relative;
    overflow:hidden;
    margin-bottom:5px;
}
.js .portfolio-box {
    opacity:0;
}
.portfolio-box:hover .portfolio-caption {
    opacity:1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=95)";
    filter: alpha(opacity=95);
}
.portfolio-image {
    margin:0;
}
.portfolio-image img {
    display: block;
    width: 100%;
    box-shadow:0 0 0 0 #000000;
}
.portfolio-caption:before, 
.portfolio-title {
    display: inline-block;
    vertical-align: middle;
}
.portfolio-caption:before {
    content: "";
    height: 100%;
}
.portfolio-caption {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    display:block;
    opacity:0;
    text-align:center;
    overflow:hidden;
    background:rgb(127, 140, 141);
    background:rgba(127, 140, 141, 0.85);
    -webkit-backface-visibility:hidden;
    -webkit-transform: translateZ(0);
    -webkit-transition:0.2s all linear;
        -moz-transition:0.2s all linear;
            transition:0.2s all linear;
            backface-visibility:hidden;
}
.portfolio-title {
    color:#FFFFFF;
    margin:0;
    font-size:15px;
    text-transform:uppercase;
}
.portfolio-category {
    display:block;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:1px;
    margin-top:5px;
}

.des {
    text-align:center;
    font-size:12px;
    /* height:250px;
    overflow:hidden;*/
}

这是页面的代码：

 <!-- portfolio box 1 -->
            <div class="grid-25 mobile-grid-50 tablet-grid-33">
                <a class="portfolio-popup" href="10607992_380327985449549_704859460_n.jpg">
                <div class="portfolio-box">       
                <figure class="portfolio-image"><img src="10607992_380327985449549_704859460_a.jpg" alt="ASUS N550 Performance Laptop, $1200" title="ASUS N550 Performance Laptop, $1200"></figure><!-- close portfolio image -->
                <div class="portfolio-caption">
                    <h3 class="portfolio-title">$1200<span class="portfolio-category">ASUS N550 Performance Laptop, $1200</span></h3>
                </div><!-- close portfolio caption -->               
                </div>
            </a><div class = "des">ASUS N550 Performance Laptop, $1200<form method="post" target="_top">
<input type="submit" name="submit" value="Buy Now">
</form></div>
                 </span>
            </div>
            <!-- close portfolio -->

我觉得自己像个白痴。我唯一能做的就是解决＆＃34;这个问题是添加＆＃34;身高：250px; 溢出：隐藏;＆＃34;到DIV但它看起来很可怕。我不需要它在一个精确的网格中（但它会很好） - 我只是需要它不要弄乱额外的文本行添加到项目。提前谢谢。

Answer 1

第5个网格项目未正确对齐的原因是因为前4个项目的自动高度不同（其描述文本长度不同）

我多次解决过这个问题。 3种方法

在响应行的末尾动态回显<div class="clear" style="clear:both" ></div>。 @tony到你的回复，你可以使用迭代器来计算一行中显示的网格项数。这里有一个实时网站也从db ttp：//glow-raspberry.com/product/ketone/循环其网格项目，其中使用了class =＆＃34; clear＆＃34;响应地对齐所有项目。
创建一个循环计算所有网格项的最大高度的函数，并将其应用于函数返回的max-height固定值的网格项的其余部分。与第一种方法相比，我仍然更喜欢第一种方法，因为它的重量更轻。
第三种方法是将fulltext放在描述div的title属性中，同时使用摘录函数返回用于描述显示的固定长度文本，这不会在网格项之间创建不同的高度，但是缺点是你只能看到以＆＃34; ...＆＃34;结尾的部分描述文字。直到你将鼠标悬停在它上面才能看到完整的字符串标题。

Answer 2

这么简单的布局有很多标记和CSS。

灵活的产品网格

这是一个简单，简洁的概念。

HTML被剥离

<div class="product">    
  <img src="http://www.placehold.it/400" alt="image" />    
  <p>Long Product Description, $2194</p>    
  <button type="submit" name="submit" value="Buy Now">Buy Now</button>  
</div>

一堆CSS

产品与display: inline-block和vertical-align: top
产品的宽度为百分比，并会自然重新。在这个例子中，25％得到四个。
box-sizing: border-box将填充包含在宽度和高度中。这很重要，因为我们可以为每个产品提供一些填充并仍然声明可靠的百分比宽度
产品描述给出了一个最小高度，以排列每个产品底部的按钮
由于max-width: 100%和max-height: 100%

完整示例

请注意，结尾div标记位于下一个开始div标记旁边：</div><div>。这是prevent the gap that occurs with inline elements。

重新调整浏览器窗口的大小，以便看到网格流畅地重新调整大小。

＆＃13;

* {
  box-sizing: border-box;
}
.wrap {
  padding: 0 10px 10px 0;
}
.product {
  display: inline-block;
  vertical-align: top;
  width: 25%;
  text-align: center;
  min-width: 100px;
  padding: 10px 0 0 10px;
}
.product p {
  min-height: 50px;
  /* This can change with @media */
}
.product button {
  padding: 10px;
  background: #DDD;
  border-radius: 3px;
  color: #FFF;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 0.8em;
  border: none;
}
.product img {
  max-width: 100%;
  max-height: 100%;
}

＆＃13;

<div class="wrap">
  <div class="product">
    <img src="http://www.placehold.it/400" alt="image" />
    <p>Long Product Description, $2194</p>
    <button type="submit" name="submit" value="Buy Now">Buy Now</button>
  </div><div class="product">
    <img src="http://www.placehold.it/400" alt="image" />
    <p>Short, $2194</p>
    <button type="submit" name="submit" value="Buy Now">Buy Now</button>
  </div><div class="product">
    <img src="http://www.placehold.it/400" alt="image" />
    <p>Long Product Description, $2194</p>
    <button type="submit" name="submit" value="Buy Now">Buy Now</button>
  </div><div class="product">
    <img src="http://www.placehold.it/400" alt="image" />
    <p>Short, $2194</p>
    <button type="submit" name="submit" value="Buy Now">Buy Now</button>
  </div><div class="product">
    <img src="http://www.placehold.it/400" alt="image" />
    <p>Long Product Description, $2194</p>
    <button type="submit" name="submit" value="Buy Now">Buy Now</button>
  </div><div class="product">
    <img src="http://www.placehold.it/400" alt="image" />
    <p>Short, $2194</p>
    <button type="submit" name="submit" value="Buy Now">Buy Now</button>
  </div><div class="product">
    <img src="http://www.placehold.it/400" alt="image" />
    <p>Long Product Description, $2194</p>
    <button type="submit" name="submit" value="Buy Now">Buy Now</button>
  </div><div class="product">
    <img src="http://www.placehold.it/400" alt="image" />
    <p>Short, $2194</p>
    <button type="submit" name="submit" value="Buy Now">Buy Now</button>
  </div>
</div>

＆＃13;

Answer 3

通过在响应式CSS表单中使用nth-child修复了问题，我相信，如果有更好的方式让我知道，这是我的简单代码修改。

  .mobile-grid-50 {
    float: left;
    width: 50%;
    /* <IE7> */
    *width: expression(Math.floor(0.5 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
    /* </IE7> */
  }
  .mobile-grid-50:nth-child(2n+1) {
clear: both;
}


  .tablet-grid-33 {
    float: left;
    width: 33.33333%;
    /* <IE7> */
    *width: expression(Math.floor(0.33333 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
    /* </IE7> */
  }

  .tablet-grid-33:nth-child(3n+3) {
clear: both;
}

  .grid-25 {
    float: left;
    width: 25%;
    /* <IE7> */
    *width: expression(Math.floor(0.25 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
    /* </IE7> */

  }
  .grid-25:nth-child(4n+3) {
clear: both;
}

响应式CSS网格不允许适当的间距

3 个答案:

灵活的产品网格

HTML被剥离

一堆CSS

完整示例