Question

我正在努力获得以下全屏安排：http://jsfiddle.net/9gUP8/301/

但是，尽管我最好的努力，当我在我的实际css表单上用jsfiddle显示它时，我没有得到相同的结果。黄色区块留在左边，1＆amp; 2个粉红色的块正好在彼此的顶部，没有衬垫。或者在它下面，如果我尝试将div中的“row”类div包装起来（这是我想要的响应式设计，因为屏幕变得更小，但不是最初。我正在使用bootstrap-responsive.css那将是是什么导致了这些问题？

的index.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>

的main.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;
}

在响应中堆叠和移动div

1 个答案: