0

現在CSSを勉強中です。フォーム要素を正しく配置するのに苦労しています。特にsubmitBtndivの最後の要素、ここに私の問題があります:

ここに画像の説明を入力

フローティングsubmitBtndivはdiv内に含まれていませんformContainer。これは私のコードです( spacerdivがオフになっています):

* {
    margin: 0;
    padding : 0;    
}

li {
    list-style : none;
}

#mainContainer {
    width : 760px;
    margin : 20px auto ;
    background-color : red;
}

#header {
    background-color: blue;
}

#formContainer {
    background-color : green;
}

#textInfo {
    background-color : yellow ;
}

#occupationInfo {
    background-color : purple ;
}

#hobbyInfo {
    background-color : pink ;   
}

#birthdayInfo {
    background-color : brown ;
}

#briefInfo {
    background-color : darkblue;
}

#submitBtn {
    width : 50px;
    float : right;
    clear : both;
    background-color : black ; 
}

/*#spacer {
    clear : both;
}*/

しかし、コメントを外すと問題が解決します：

ここに画像の説明を入力

スペーサー div を追加する以外に、よりクリーンなソリューションはありますか?

4

2 に答える 2

1

Diego のソリューションに加えoverflow:autoて、formContainer に追加することもできます。これが発生する理由は、親要素が浮動要素を含むように展開されないためです。浮動要素はそのコンテナを「オーバーフロー」させます。

于 2012-08-17T02:18:14.847 に答える
0

はい、clearfixメソッドを使用できます。

次のコードをCSSに追加します。

/*** Clearfix ***/
.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

clearfix次に、クラスをコンテナに割り当てますdiv。

于 2012-08-17T00:27:44.990 に答える