调整大小时带列的 div 与元素重叠答案

【问题标题】：Div with columns overlaps elements while resizing调整大小时带列的 div 与元素重叠
【发布时间】：2015-07-08 23:30:00
【问题描述】：

好的，所以我有一个 div，里面有一个容器和 3 个相等的列。每列都有一个内部固定高度和宽度的卡片。然而，低于 1200 像素我的设计是有原因的。我的意思是，当我调整到 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

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

【问题讨论】：

你能发布你的完整代码吗？ Jsfiddle 中的演示会更好。
您预计会发生什么？如果您指定自定义宽度，引导程序将保留它，因此不会缩小到其下方（在切换到移动模式之前合并您的列）。如果你不这样做，那么它会很好地调整大小并切换到全宽模式，在移动模式下将它们放在彼此下方。
那是因为您设置了一个width 属性，其定义值以像素为单位？它永远不会变得比这更小，因为这就是你所说的你想要它有多宽。使用% 与px 相反，它应该变得流畅。如果您需要它停止以特定尺寸变大，请使用max-width！
是的，但如果我不指定卡片的高度和宽度，它们将如何显示？我的意思是我应该为我的卡片指定尺寸，不是吗？
将max-width 与width 和max-height 与height 结合

标签： html twitter-bootstrap css

【解决方案1】：

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

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

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

【讨论】：

我忘了提到卡片里面有一些文字和固定的线条。如果我使用上述方法，我该如何处理？
这取决于您要达到的目标。您也可以使用像素，但如果您正在调整浏览器的大小，您正在测试响应式设计，您应该使用媒体查询来更改不同视口的值。
如果您发布了一个更完整的代码示例@user1608946，那么给您一个明确的答案会更容易
你可以。首先要决定的是：我想要全宽还是固定宽度布局？如果您想要全宽，您将为容器使用基于百分比的布局，这将拉伸布局以始终占据全屏，或者您想要固定宽度。如果你想要一个固定的宽度，你可以为包装器设置一个max-width，然后在里面使用基于像素或百分比的容器。
我不想占据整个宽度，这就是我使用容器的原因！