Question

我有2个问题，但第二个问题在第一个问题得到解决之前无法解决。该页面正在寻找并按预期工作，但当我开始工作并开始在页面上工作时，它似乎被打破了。我在两个位置使用相同的浏览器。

问题是div的背景设置为auto，就像我在同一页面上的所有其他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;      
}

Answer 1

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

你是正确和左。选择一个。您还需要清除您的花车以恢复正常流程

Answer 2

将overflow: auto添加到项目类。

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

Answer 3

一种解决方案可能是添加空div和clear: both

HTML：

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

CSS：

.clear {
    clear: both;
}

JSFiddle

Answer 4

你走了。将此代码保存为任何未来开发的代码段。只需将类.clearfix添加到父容器中，如果它包含浮动子项并且你很好去:)

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

Div不包括图像属性

4 个答案: