css - 响应式浮动 div

Question

我有两个向左浮动的 div，每个宽度：50%; 和最小宽度：300px；如果容器 div 大小或没有容器的情况下的屏幕大小的宽度低于 600px，那么 div 2 自然会位于 div 1 之下。

当 div 2 低于 div 1 时，它们仍将具有 50% 的宽度......是否可以将两个 div 的宽度设为 100%？

示例：基础

在此示例中，有 3 个 div 彼此位于下方，当您达到它们的最小宽度断点时，它们的大小将调整为 100%。

这正是我想要实现的，但是我无法从我给你的 Foundation 示例中弄清楚。

score 1 · Accepted Answer

要详细说明@Simon给出的解决方案，

div.one{
    width:50%;
    min-width:100px;
    float:left;
}
@media screen and (max-width: 767px){
    div.one{ width:100%}
}

看到这个小提琴：http: //jsfiddle.net/GraH9/

这里还有一篇很好的文章来清除你在响应式设计中的概念，我有一种感觉，如果你从这里的 tuts 中学习，你会发现你未来的许多问题都得到了解决。

1 回答 1