2017-05-07 40 views
3

我正在尝试使id =“contact_details”的部分出现在id =“form”旁边。它适用于我的一个CSS样式表,但不适用于其他样式表。我不知道我要去哪里错了......我试过它,没有相对位置,不同宽度等。为什么我的“float:left;”不行?

您的帮助将非常感谢!欢呼声中,玛丽

#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_details浮子属性right,以确保旁#form元件出现#contact-details块。

以下是您的代码的一些细微更改。 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>

相关问题