Question

当前网站有3个列块布局，我正在尝试使其响应。随着窗口变得足够小，3列变成2列，这就是我想要的。但是，它留下了第三列所用的空白区域，我不想要额外的空白区域。因此，当窗口变小时，应隐藏空白区域（当窗口足够大于3列时会发生这种情况。右侧的空白区域被隐藏，直到3列变为2）。

谢谢。：）

JSFiddle

HTML：

<body>

<div id="content">
<div class="grid3">
<article class="bucket" >
<a href="#">
<img src="images/baskerville1.jpg" alt=""/>
<div class = "img-overlay">
  <h3>Monogram</h3></div>
  </a>
</article>

<article class="bucket">
<a href="#">
<img src="images/Gastalt.png" alt=""/> 
<div class="img-overlay">
    <h3>Gastalt Composition</h3>
  </div>
</a>
</article>

<article class="bucket">
<a href="#">
<img src="images/redThread.png" alt=""/> 
<div class="img-overlay">
    <h3>The Red Thread - A Visual Book</h3>
  </div>
  </a>
</article>

<article class="bucket">
<a href="#">
<img src="images/poster copy.png" alt=""/> 
<div class="img-overlay">
    <h3>Typographic Hierarchy</h3>
  </div>
  </a>
</article>

<article class="bucket">
<a href="#">
<img src="images/Spaces.png" alt=""/> 
<div class="img-overlay">
    <h3>Living in Two Spaces</h3>
  </div>
  </a>
</article>

的CSS：

    @charset "UTF-8";

*{
    margin:0;
}

.bucket {
    position:relative;
    float: left;
    margin-left: 3.2%;
    margin-bottom:30px;
}

.grid3 .bucket:nth-of-type(3n+1){
    margin-left: 0;
    clear: left;
}

.grid3 .bucket{
    width: 31.2%;
}

.img-overlay h3 {
    opacity: 1;
    display: inline-block;
    margin: auto;
    height: 20px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left:0;
    color: rgba(255,254,254,1.00);
    text-align: center;
    vertical-align: middle;
}

Answer 1

控制响应式布局中的确切数字（3col，2col等）应该通过百分比来完成，因为它更容易控制断点发生的时间和地点。这是一个JSFiddle，展示了这个：http://jsfiddle.net/sickdesigner/GLnfU/

基本上，整个事情的关键是根据所需的列数将.buckets设置为百分比。这使得您的文章在三列中填充其容器（27.3 + 3 + 3 = 33.3 * 3 = 99.9％）。

        .bucket{
            margin: 2% 3%;
            width: 27.3%; }

另外，为了理智，我添加了一个通用的盒子大小。更多关于为什么盒子大小使生活更轻松的原因：http://www.paulirish.com/2012/box-sizing-border-box-ftw/

然而，如果确实希望让您的内容按照自己的意愿行事，那么当您感觉满意时，您可以完全跳过浮动元素的所有内容。这是这个布局中更加嬉皮爱的dovey版本，虽然它看起来时尚和性感，并且让编码器（包括我自己）流口水，代码欲望，这也意味着很多机会和希望你的内容不会破坏自己（想想如果图像彼此之间的比例各不相同会发生什么）。

这是另一个JSFiddle，这次采用了嬉皮士的方式：http://jsfiddle.net/sickdesigner/zq8YC/1/

P.S。：嬉皮士的方法也不需要媒体查询，实际上这很酷。

干杯！

窗口调整大小时容器无响应 - 在右侧留下空白区域

1 个答案: