2017-05-07 4 views
3

id = "contact_details"のセクションをid = "form"の横に表示させようとしています。私のCSSスタイルシートの1つでは動作しますが、別のものでは動作しません。私はどこが間違っているのか分かりません...さまざまな幅で、相対位置なしで、それを試しました。なぜ私の "浮動小数点:左;うまくいかない?

あなたのお手伝いをさせていただきます。あなたが別のスタイルシートファイルにこのコードを配置する場合乾杯、マリー

#wrapper { 
 
    width: 989px; 
 
    margin: 0 auto 0; 
 
    position: relative; 
 
    background-color: gray; 
 
    } 
 

 
    #contact_details { 
 
    float: left; 
 
    position: relative; 
 
    width: 350px; 
 
    padding-top: 30px; 
 
    padding-left: 30px; 
 
    padding-right: 30px; 
 
    background-color: blue; 
 
    } 
 

 
    #form { 
 
    float: left; 
 
    position: relative; 
 
    width: 450px; 
 
    padding-top: 30px; 
 
    padding-right: 30px; 
 
    background-color: red; 
 
    } 
 

 
    #form_table { 
 
    padding-left: 0px; 
 
    padding-right: 0px; 
 
    }
<body> 
 
    <div id="wrapper"> 
 
    <header></header> 
 
    <nav></nav> 
 
    <section id="contact_details"> 
 
     <h1>Contact Details</h1> 
 
     <br> 
 
     <h3>Physical Address</h3> 
 
     <p><em>There and Back Travel</em></p> 
 
     <p>Travel House Level 1</p> 
 
     <p>Travel Line North</p> 
 
     <p>Waikanae</p> 
 
     <p>New Zealand</p> 
 
    </section> 
 
      
 
    <aside id="form"> 
 
     <h1></h1> 
 
     <form name="user_details"> 
 
     <table id="form_table"> 
 
      <tr> 
 
       <td class="form_cell"><label for="first_name">First Name:</label></td> 
 
       <td class="form_cell"><input type="text" name="first_name"></td> 
 
      </tr> 
 
      <tr> 
 
       <td class="form_cell"><label for="surname">Surname:</label></td> 
 
       <td class="form_cell"><input type="text" name="surname"></td> 
 
      </tr> 
 
      <tr> 
 
       <td>Preferred tour types:</td> 
 
       <td> 
 
        <input type="checkbox" name="adventure">Adventure<br> 
 
        <input type="checkbox" name="beach">Beach<br> 
 
        <input type="checkbox" name="leisure">Leisure<br> 
 
       </td> 
 
      </tr> 
 
     </table> 
 
      <input type="submit"><input type=reset> 
 
     </form> 
 
    </aside> 
 
      
 
    <footer></footer> 
 
    </div> 
 
    </body> 
 

+1

コードスニペットを実行して、あなたはそれがうまく働いていることがわかりますしてください。 –

答えて

1

それは右に見える... enter image description here

は、このスタイルシートファイルがロードされているされて非常に良いチャンスがあります他のスタイルシートファイルの前にロードされ、その後に読み込まれるスタイルシートには、あなたの投稿のルールを上書きするいくつかのルールがあります。 スタイルシートの読み込み順序を調べます。基本的に、最後のルールは要素が画面上でどのように見えるかを決定します。

すなわち

#wrapper { 
    display: block; 
} 
#wrapper { 
    display: none; 
} 

#wrapper要素が原因で最後のルールで表示されません。 注:上記のルールを!importantを使用して動作させる方法がありますが、これはお勧めできません。

2

スタイルシートを正しくロードし、有効なhtmlスケルトンを提供していることを確認してください。

フロア属性#contact_detailsrightに変更し、#contact-detailsブロックが#form要素の隣に表示されるようにしました。

コードのマイナーチェンジは以下のとおりです。 Screenshot: Markups result

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <meta charset="utf-8"> 
 
\t \t <title></title> 
 

 
\t \t <style type="text/css"> 
 
\t \t \t #wrapper { 
 
\t \t \t \t width: 989px; 
 
\t \t \t \t margin: 0 auto 0; 
 
\t \t \t \t position: relative; 
 
\t \t \t \t background-color: gray; 
 
\t \t \t } 
 

 
\t \t \t #contact_details { 
 
\t \t \t \t float: right; 
 
\t \t \t \t position: relative; 
 
\t \t \t \t width: 350px; 
 
\t \t \t \t padding-top: 30px; 
 
\t \t \t \t padding-left: 30px; 
 
\t \t \t \t padding-right: 30px; 
 
\t \t \t \t background-color: blue; 
 
\t \t \t } 
 

 
\t \t \t #form { 
 
\t \t \t \t float: left; 
 
\t \t \t \t position: relative; 
 
\t \t \t \t width: 450px; 
 
\t \t \t \t padding-top: 30px; 
 
\t \t \t \t padding-right: 30px; 
 
\t \t \t \t background-color: red; 
 
\t \t \t } 
 

 
\t \t \t #form_table { 
 
\t \t \t \t padding-left: 0px; 
 
\t \t \t \t padding-right: 0px; 
 
\t \t \t } 
 
\t \t </style> 
 
\t </head> 
 
\t <body> 
 
\t \t <div id="wrapper"> 
 
\t \t \t <header></header> 
 
\t \t \t <nav></nav> 
 

 
\t \t \t <section id="contact_details"> 
 
\t \t \t  <h1>Contact Details</h1> 
 
\t \t \t  <br> 
 
\t \t \t  <h3>Physical Address</h3> 
 
\t \t \t  <p><em>There and Back Travel</em></p> 
 
\t \t \t  <p>Travel House Level 1</p> 
 
\t \t \t  <p>Travel Line North</p> 
 
\t \t \t  <p>Waikanae</p> 
 
\t \t \t  <p>New Zealand</p> 
 
\t \t \t </section> 
 

 
\t \t \t <aside id="form"> 
 
\t \t \t  <h1></h1> 
 
\t \t \t  <form name="user_details"> 
 
\t \t \t  <table id="form_table"> 
 
\t \t \t   <tr> 
 
\t \t \t    <td class="form_cell"><label for="first_name">First Name:</label></td> 
 
\t \t \t    <td class="form_cell"><input type="text" name="first_name"></td> 
 
\t \t \t   </tr> 
 
\t \t \t   <tr> 
 
\t \t \t    <td class="form_cell"><label for="surname">Surname:</label></td> 
 
\t \t \t    <td class="form_cell"><input type="text" name="surname"></td> 
 
\t \t \t   </tr> 
 
\t \t \t   <tr> 
 
\t \t \t    <td>Preferred tour types:</td> 
 
\t \t \t    <td> 
 
\t \t \t     <input type="checkbox" name="adventure">Adventure<br> 
 
\t \t \t     <input type="checkbox" name="beach">Beach<br> 
 
\t \t \t     <input type="checkbox" name="leisure">Leisure<br> 
 
\t \t \t    </td> 
 
\t \t \t   </tr> 
 
\t \t \t  </table> 
 
\t \t \t   <input type="submit"><input type=reset> 
 
\t \t \t  </form> 
 
\t \t \t </aside> 
 

 
\t \t \t <footer></footer> 
 
\t \t </div> 
 
\t </body> 
 
</html>

関連する問題