1

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

但是，尽管我在插入 css 时尽了最大努力，因为我在实际 css 表上的 jsfiddle 中显示了它，但我没有得到相同的结果。黄色块保持在左侧，而 1 和 2 个粉红色块在彼此的顶部，没有填充。或者如果我尝试将“行”类 div 包装在一个 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%;
}
4

1 回答 1

1

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

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

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

.stayleft {
    float: left !important;
    height: 100% !important;
}
于 2013-05-02T04:24:36.883 回答