Question

好吧所以我有一个带有容器和内部3列相等的div。每列都有一个内部固定高度和宽度的卡片。然而，低于1200px我的设计是有原因的。我的意思是，当我调整到1200px列开始合并在一起，最终在较小的尺寸，他们倾向于重叠div和我的页脚。我知道它很复杂，所以这里有一些代码。

---------- ---------- HTML

      <!-- 2nd card -->
            <div class="col-md-4">
                <div class="card">
                <div class="cardoverlay"> 
                </div>
                </div>
             </div>
      <!-- 3rd card -->
            <div class="col-md-4">
                <div class="card">
                    <div class="cardoverlay">
                    </div>
                </div>
                </div>
  </div>
  </div>
  </div>

----------- ----------- CSS

.categories {
        background-color: #e1e1e1;
        height: 800px;  
    }
    .card {
        width: 353px;
        height: 662px;
        -webkit-border-radius: 5px/7px;
        -moz-border-radius: 5px/7px;
        border-radius: 8px/10px;
        background-color: #fff;
        -webkit-box-shadow: 0 2px #b8b3b3;
        -moz-box-shadow: 0 2px #b8b3b3;
        box-shadow:  3px #b8b3b3;
        margin-top: 50px;

    }
    .cardoverlay {
        width: 353px;
        height: 202px;
        -webkit-border-radius: 5px 5px 0 0/10px 10px 0 0;
        -moz-border-radius: 5px 5px 0 0/10px 10px 0 0;
        border-radius: 5px 5px 0 0/10px 10px 0 0 #f1f1f1;
        background-color: #f9f9f9;
        -webkit-box-shadow: 0 3px #f1f1f1;
        -moz-box-shadow: 0 3px #f1f1f1;
        box-shadow: 0 3px #f1f1f1;

此时的列正在合并。 http://imgur.com/dEQzLjb

P.S我使用的是容器而不是容器流体，所以我可以让列彼此相邻。

Answer 1

您正在使用特定宽度规则，这意味着div将始终保持这些大小。当浏览器重新调整大小时，它们将相互重叠。

如果您使用基于百分比的布局%，则不会发生这种情况，因为它们会相对于容器大小进行缩放。

.card, .cardoverlay {
  width: 33%;
}

在调整大小时，Div与列重叠元素

1 个答案: