0

CSSの簡単な質問。非常に単純な CSS/HTML の問題を理解できないようです。これが JSFiddle です。

http://jsfiddle.net/BmM6t/

基本的に、これら 2 つの div は 100% 未満の幅にはサイズ変更されません。

<div id="main_pic" class="main_div">
   THIS IS WHERE THE MAIN PIC WILL GO.
</div>
<div id="signin" class="main_div">
   SIGN IN TO THE SITE!
   <form>
       <label for="name">EMAIL/USERNAME:</label>
       <input type="text" name="name" id="name">
       <label for="email">PASSWORD:</label>
       <input type="text" name="email" id="email">
       <br />
       <input type="submit" value="Let's Play!">
   </form>
</div>

クラス main_div を持つ 2 つの div が、幅が明確に記述されていても、実際には何らかの理由で画面の幅全体を占めていることがわかります (要素を調べるとわかります)。main_div のいずれかの幅を変更しようとすると、幅が変更されますが、要素を調べると、オブジェクトの幅が変更され、その周りにパディングが追加されて、画面の幅全体を占めるようになります。

私が作った小さなエラーだと確信していますが、見つけることができません。助けてくれてありがとう！

4

2 に答える 2

1

それが s の仕組みdivです。これらはブロック レベルの要素です。コンテナ要素全体を使用したくない場合は、floatそれを作成するか、作成することができますinline-block

于 2012-10-27T05:02:28.833 に答える
0

サイズを変更しているが内容を隠していないことを確認できるように、 に aoverflow: hidden;を使用します。.main_div

于 2012-10-27T04:55:03.747 に答える