DIVフローとボーダーの問題

Question

コードに何が問題なのですか？国境は間違っています。

<div id="contents" style="width: 50%; height: auto; margin: 0 auto; left: 50%; border: 2px solid #73AD21;"> 
    <div id="USER" style="margin: 5px"> 
     <p style="width: 50%; text-align:left; padding-left: 1%; float: right; font-size: large"> user :</p> 
     <input id="txt_ID" type="text" style="width: 45%; float: left"/> 
    </div> 
    <div id="PASS" style="margin: 5px"> 
     <p style="width: 50%; text-align:left; padding-left: 1%; float: right; font-size: large">pass :</p> 
     <input id="txt_Password" type="text" style="width: 45%; float: left"/> 
    </div> 
</div> 

Answer 1

を追加します。 float: left;をcontents divに設定するだけで問題が表示されます。

<div id="contents" style="width: 50%; height: auto; margin: 0 auto; float: left; left: 50%; border: 2px solid #73AD21;"> 
 
    <div id="USER" style="margin: 5px"> 
 
    <p style="width: 50%; text-align:left; padding-left: 1%; float: right; font-size: large"> user :</p> 
 
    <input id="txt_ID" type="text" style="width: 45%; float: left"/> 
 
    </div> 
 
    <div id="PASS" style="margin: 5px"> 
 
    <p style="width: 50%; text-align:left; padding-left: 1%; float: right; font-size: large">pass :</p> 
 
    <input id="txt_Password" type="text" style="width: 45%; float: left"/> 
 
    </div> 
 
</div>

おそらく、インラインCSSを使用しないではなく、外部CSSファイルを持っているし、代わりにcontents divの上でフロートをクリアするためにclearfixを使用する必要があります。

Answer 2

あなたはfloat要素を使用しますので、フロートをクリアする必要があり

<div id="contents" style="width: 50%; height: auto; margin: 0 auto; left: 50%; border: 2px solid #73AD21;"> 
    <div id="USER" style="margin: 5px"> 
     <p style="width: 50%; text-align:left; padding-left: 1%; float: right; font-size: large"> user :</p> 
     <input id="txt_ID" type="text" style="width: 45%; float: left"/> 
    </div> 
    <div id="PASS" style="margin: 5px"> 
     <p style="width: 50%; text-align:left; padding-left: 1%; float: right; font-size: large">pass :</p> 
     <input id="txt_Password" type="text" style="width: 45%; float: left"/> 
    </div> 
    <div style="clear: both"></div> 
</div> 

Answer 3

メインのdiv終了前clear: bothを追加します。

は、親が何の高さを持っていないので、あなたは、内側のdivで山車を使用している次のCSS

#contents:after { 
    content: ''; 
    display: table; 
    clear:both; 
} 

Answer 4

あなたは#contents { float: left}を適用したり、内部要素の高さを取るために、親のための明確なフロートトリックを使用することができます。

#contents { 
 
    width: 50%; 
 
    height: auto; 
 
    margin: 0 auto; 
 
    left: 50%; 
 
    border: 2px solid #73AD21; 
 
} 
 
#contents:after { 
 
    content: ''; 
 
    display: block; 
 
    clear: both; 
 
} 
 
#contents > div { 
 
    margin: 5px; 
 
} 
 
#contents p { 
 
    width: 50%; 
 
    text-align: left; 
 
    padding-left: 1%; 
 
    float: right; 
 
    font-size: large; 
 
} 
 
#contents input { 
 
    width: 45%; 
 
    float: left 
 
}

<div id="contents"> 
 
    <div id="USER"> 
 
    <p>user :</p> 
 
    <input id="txt_ID" type="text" /> 
 
    </div> 
 
    <div id="PASS"> 
 
    <p>pass :</p> 
 
    <input id="txt_Password" type="text" /> 
 
    </div> 
 
</div>

Answer 5

あなたがfloatを使用しているためです - これは、通常の外の要素を取りますフローは、すべてが浮動しているため、外側のdivには高さがありません。

使用display: inline-block代わり：

<div id="contents" style="width: 50%; height: auto; margin: 0 auto; left: 50%; border: 2px solid #73AD21;"> 
    <div id="USER" style="margin: 5px"> 
     <p style="width: 50%; text-align:left; padding-left: 1%; font-size: large; display: inline-block;"> user :</p> 
     <input id="txt_ID" type="text" style="width: 45%; display: inline-block;"/> 
    </div> 
    <div id="PASS" style="margin: 5px"> 
     <p style="width: 50%; text-align:left; padding-left: 1%; font-size: large; display: inline-block;">pass :</p> 
     <input id="txt_Password" type="text" style="width: 45%; display: inline-block;"/> 
    </div> 
</div> 

link to fiddle

Answer 6

あなたの親コンテナは、そのfloat編の子供では折りたたまれています。私はclearfixクラスを使用することをお勧めします

.cf:before, 
 
.cf:after { 
 
    content: " "; /* 1 */ 
 
    display: table; /* 2 */ 
 
} 
 

 
.cf:after { 
 
    clear: both; 
 
} 
 

 
/** 
 
* For IE 6/7 only 
 
* Include this rule to trigger hasLayout and contain floats. 
 
*/ 
 
.cf { 
 
    *zoom: 1; 
 
}

<div class="cf" id="contents" style="width: 50%; height: auto; margin: 0 auto; left: 50%; border: 2px solid #73AD21;"> 
 
    <div id="USER" style="margin: 5px"> 
 
     <p style="width: 50%; text-align:left; padding-left: 1%; float: right; font-size: large"> user :</p> 
 
     <input id="txt_ID" type="text" style="width: 45%; float: left"/> 
 
    </div> 
 
    <div id="PASS" style="margin: 5px"> 
 
     <p style="width: 50%; text-align:left; padding-left: 1%; float: right; font-size: large">pass :</p> 
 
     <input id="txt_Password" type="text" style="width: 45%; float: left"/> 
 
    </div> 
 
</div>

Clearfixソース：clearfixのhttp://nicolasgallagher.com/micro-clearfix-hack/

情報：What is a clearfix?国境について '欠陥のある' とは何