css - 在响应式中堆叠和移动 div

Question

我正在尝试获得以下全屏排列:http://jsfiddle.net/9gUP8/301/

但是，尽管我在插入 css 时尽了最大努力，因为我在实际的 css 工作表上的 jsfiddle 中显示了它，但我没有得到相同的结果。黄色 block 保持在左侧，1 和 2 粉红色 block 彼此重叠，没有填充。或者在它下面，如果我尝试将“行”类 div 包装在一个 div 中(这是我想要的响应式设计，因为屏幕变小了，但不是最初。我正在使用 bootstrap-responsive.css 那是是什么导致了这些问题？



索引.html

<div class="row">
            <div class="span8 stayright">
                <!-- SnapWidget -->
                <iframe src="http://snapwidget.com/mp/?u=ZGVudmVyc3RyZWV0aGVhcnR8aW58NzcwfDJ8M3x8eWVzfDV8bm9uZQ==" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:770px; height: 770px" ></iframe>          
            </div>
            <div class="span4 stayleft">
                <img src="../../Sites/Boiler%20Plate/img/joshmays.jpg" alt="joshmays" width="370" height="370">
            </div>
            <div class="span4 stayleft">
                <img src="../../Sites/Boiler%20Plate/img/joshmays.jpg" alt="joshmays" width="370" height="370">
            </div>
            <div class="span8">
                <!-- SnapWidget -->
                <iframe src="http://snapwidget.com/in/?u=ZGVudmVyc3RyZWV0aGVhcnR8aW58NzYwfDF8MXx8eWVzfDB8bm9uZQ==" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:770px; height: 770px" ></iframe>
            </div>
            <div class="span4">
                <h2>Something</h2>
                <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
            </div>
            <div class="span4">
                <h2>Something Else</h2>
                <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
            </div>
        </div>

主.css

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

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

Answer 1

如果它在 jsFiddle 中工作，但在您的实时环境中不工作，那么您有 CSS 覆盖它。使用 Chrome，右键单击问题区域并选择“检查元素”。从那里，寻找没有删除线的规则。那将是你的罪魁祸首。

另一方面，你可以试试这个:

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

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