堆疊和轉移的div響應

Question

我試圖讓下面的全屏安排：http://jsfiddle.net/9gUP8/301/

但是，儘管我盡了最大努力，當我在CSS衝，因爲我已經在顯示的jsfiddle我實際的CSS表我這不要得到相同的結果。黃色塊留在左邊，並且粉色塊彼此正好對齊，沒有填充。或者，如果我嘗試在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; 
}