0

2 つの問題がありますが、最初の問題が修正されるまで、2 番目の問題に対処できません。ページは意図したとおりに表示され、機能していましたが、仕事に来てページの作業を開始したとき、壊れているようです。両方の場所で同じブラウザを使用しています。

問題は、同じページの他のすべての div と同様に、div の背景が自動に設定されていることですが、何らかの理由で最後の 1 つが画像の下部に広がっていません。 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;      
}
4

4 に答える 4

0

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-14T20:47:46.403 に答える
0

1つの解決策は、空のdivおよびclear: both

HTML:

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

CSS:

.clear {
    clear: both;
}

JSFiddle

于 2013-11-14T20:48:53.963 に答える
0

どうぞ。今後の開発のために、このコードをスニペットとして保存してください。フローティングの子が含まれている場合は、クラス .clearfix を親コンテナーに追加するだけで、準備完了です:)

.clearfix{*zoom:1;}
.clearfix:before,.clearfix:after{display:table;content:"";line-height:0;}
.clearfix:after{clear:both;}
于 2013-11-14T21:01:30.940 に答える