Css 在快速响应中堆叠和移动div

我试图获得以下全屏布局：

但是，尽管我尽了最大的努力，当我在我的实际css表上的JSFIDLE中显示css时，我并没有得到相同的结果。黄色块保持在左侧，1和2个粉红色块相互重叠，没有填充。或者，如果我尝试将“row”类div包装在一个div中（当屏幕变小时，这是我希望从响应设计中得到的，但不是最初的结果。我使用的是bootstrap-responsive.css，这会导致问题吗？



index.html

---

如果它在JSFIDLE中工作，但在您的实时环境中不工作，那么您就有了CSS。使用Chrome，右键单击问题区域并选择“inspect element”。从那里，查找没有穿透的规则。这将是您的罪魁祸首

另一方面，您可以尝试以下方法：

.stayright {
    float: right !important;
    height: 100% !important;
}

.stayleft {
    float: left !important;
    height: 100% !important;
}

---

如果它在JSFIDLE中工作，但在您的实时环境中不工作，那么您就有了CSS。使用Chrome，右键单击问题区域并选择“inspect element”。从那里，查找没有穿透的规则。这将是您的罪魁祸首

另一方面，您可以尝试以下方法：

.stayright {
    float: right !important;
    height: 100% !important;
}

.stayleft {
    float: left !important;
    height: 100% !important;
}

---

你使用的越少！越重要越好。这意味着你以后不能重写这些属性，从而摆脱层叠样式表的想法。没错，这就是为什么不建议先使用它的原因。@Xarcell我做了你给我的检查提示，发现@media和.span都是用

float:left

s重写的。谢谢！你使用的越少r更好。这意味着您以后不能重写这些属性，从而摆脱层叠样式表的想法。是的，这就是为什么不首先建议使用它的原因。@Xarcell我做了您给我的检查提示，发现@media和.span都被

float:left

s重写。谢谢！

.stayright {
    float: right !important;
    height: 100% !important;
}

.stayleft {
    float: left !important;
    height: 100% !important;
}