css - CSS レイアウトとボーダーの問題

Question

Web ページで奇妙なレイアウト/配置の問題に直面しています。これは主に、フロートされていないアイテムとコンテナの境界線が正しく流れていないことに関係しています。クリアとオーバーフローを試みました: auto、hidden ですが、それでも機能しません。

よろしくお願いします。

Answer 1

次のcssを追加します

.explore-inner:after{
    content: '.';
display: block;
overflow: hidden;
visibility: hidden;
font-size: 0;
line-height: 0;
width: 0;
height: 0;
clear:both;

}

「ul」にはフローティングがあるため、「explore-inner」クラスの後にクリアする必要があります

Answer 2

実際、あなたはfloatingあなたのものでchild div'sはないclearedので、私はあなたの親にそれparent div'sを与えたので、今はうまく機能しています....overflow:hiddendiv

だからあなたはcss私のものであなたを更新することができます。これがあなたのために働くことを願っています:-

CSS

.explore-inner {
    background: url("../images/inner-bg.png") repeat-x scroll 0 0 transparent;
    border-top: 1px solid #EBEBEA;
    overflow: hidden;
}
#team-message {
    background: url("../images/outer-bg.png") repeat-x scroll 0 0 transparent;
    clear: both;
    overflow: hidden;
    padding: 10px;
    width: 940px;
}

Answer 3

あなたの<ul>アイテムにはフロートがあります。これは正しくクリアされていません。あなたが持っている<ul>アイテムの直後に.explore-innerclear: both;

Answer 4

overflow: auto;に追加.explore-inner

.explore-inner {
border: 1px solid #EBEBEA;
background: url(../images/inner-bg.png) repeat-x;
overflow: auto;
}