Div不包括圖像屬性

我有兩個問題，但第二個問題不能解決，直到第一個問題得到解決。該頁面正在按預期工作，但是當我開始工作並開始在頁面上工作時，該頁面似乎已被打破。我在兩個位置使用相同的瀏覽器。Div不包括圖像屬性

問題是div的背景設置爲auto，就像我在同一頁面上的所有其他div一樣，但由於某種原因，最後一個div沒有跨越到圖像的底部。 http://i.imgur.com/9DJa3Fp.png?1

<div class="items"> 

<h2><a name="friday"><a href="#">Friday catch of the day:</a></a></h2> 

    <img src="images/catch.png" align="right" alt="Sage-rubbed Double-cut Pork Chop" /> 

    <p><span class="title">Alaskan Halibut with a Rich Loire Valley Beurre Blanc Sauce</span> - served with mashed purple Peruvian potatoes and haricot verts.</p> 

    <p><span class="title">Recommended pairing:</span> '98 Passi Emilio Vineyards Sauvignon Blanc</p> 


</div>

CSS

.items { 
    margin: 20px; 
    height: auto; 
    width: 910px; 
    background-color: rgba(0, 0, 0, .7); 
    padding: 10px; 
    z-index: 1; 
} 
.items img { 
    float: left; 
    margin-right: 10px; 
    float: right; 
    border-radius: 6px; 
    width: auto; 
    padding: 8px; 
    background-color: #FFFFFF; 
} 
.items p { 
    font-family: 'PT Sans'; 
    font-size: 16px;  
} 
.items a { 
    color: #FFFFFF; 
    text-decoration: none;  
}

來源

2013-11-14 Joshua Mathews

.items img { 
    float: left; <---- ??? 
    margin-right: 10px; 
    float: right; <---- ??? 
    border-radius: 6px; 
    width: auto; 
    padding: 8px; 
    background-color: #FFFFFF; 
}

你浮權和離開。選擇一個。之後您還需要清除浮標以恢復正常流程

來源

2013-11-14 20:44:52

我怎麼錯過了？謝謝！另外，當你說清理我的花車，你的意思是使用

，並設置清除？ –

這將做到這一點。 –

將overflow: auto添加到項目類別。

.items { 
    margin: 20px; 
    height: auto; 
    width: 910px; 
    background-color: rgba(0, 0, 0, .7); 
    padding: 10px; 
    z-index: 1; 
    overflow: auto; 
}

來源

2013-11-14 20:47:46 user2249160

一種解決方案可能是添加一個空的div和clear: both

HTML：

<div class="items"> 
    ...  
    <div class="clear"></div> 
</div>

CSS：

.clear { 
    clear: both; 
}

JSFiddle

來源

2013-11-14 20:48:53

在這裏，你走了。將此代碼保存爲任何未來開發的代碼片段。只要將父類的.clearfix添加到父容器中（如果它包含浮動子元素，那麼你就很好:)）

.clearfix{*zoom:1;} 
.clearfix:before,.clearfix:after{display:table;content:"";line-height:0;} 
.clearfix:after{clear:both;}

來源

2013-11-14 21:01:30 satancorpse

Div不包括圖像屬性

回答

相關問題