1

I have a container in which I'm putting a bunch of elements, and my expectation was that the container would expand downward as the container filled with elements. Unfortunately, this is not the case. I have some div's that are floating over the edge of my container. I was able to remedy this with a bunch of break tags, but this was a sloppy solution.

Perhaps my CSS is incorrect, but I can't figure out where. The long select list and the major description should reside in the upper, white box.

Here's a Fiddle.

EDIT: Uwe led me to research floats. I've discovered that floats are not considered in the normal flow layout. So how is this fixable?

EDIT 2: I found a clearfix solution.

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {
    display: inline-block;
}
* html .clearfix {
    height: 1%;
} /* Hides from IE-mac \*/
    .clearfix {
        display: block;
}
4

1 に答える 1

3

フロートをクリアするには多くの方法があります。に追加overflow: hidden;するだけ.mainで問題が解決します。

ただし実際には、親 div に修正を適用するよりも、問題の原因となっているフロートを直接クリアする方がよいでしょう。実際には、代わりに次のプロパティを .bottom に追加することをお勧めします。

.bottom {
    clear: both;
    overflow: hidden;
}
  • clear: bothのフロートをクリアし.contentます。
  • overflow: hiddenフロートのクリアを処理します.bottom

HTML タグidの属性に加えて、属性の使用も検討する必要があります。class

于 2012-06-10T09:59:01.253 に答える