为什么我的“浮动：离开;”不起作用？
[英]Why does my “float: left;” not work?
问题描述
I am trying to make the section with id="contact_details" appear next to the aside with id="form". 
我试图让id =“contact_details”的部分出现在旁边的id =“form”旁边。 It does work for one of my CSS style sheets but not for another. 它适用于我的一个CSS样式表，但不适用于另一个。 I don't know where I am going wrong... I tried it with and without relative position, with different widths etc. 我不知道我哪里出错了...我试过它有没有相对位置，有不同的宽度等等。
Your help would be very much appreciated! 非常感谢您的帮助！ Cheers, Marie 干杯，玛丽
#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>
2 个解决方案
解决方案1
2 2017-05-07 06:39:11
It works, just make sure you load the stylesheet correctly and provide a valid html skeleton. 它工作正常，只需确保正确加载样式表并提供有效的html骨架。
I have changed the float attribute of #contact_details to right , to ensure the #contact-details block appears next to the #form element. 我已将#contact_details的float属性#contact_details为right ，以确保#contact-details块出现在#form元素旁边。
Here are some minor changes to your code. 以下是对代码的一些细微更改。 Screenshot: Markups result 屏幕截图：标记结果
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #wrapper { width: 989px; margin: 0 auto 0; position: relative; background-color: gray; } #contact_details { float: right; 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; } </style> </head> <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> </html>
解决方案2
1 2017-05-07 06:29:34
It looks right... 看起来不错......
If you put this code in another stylesheet file there is a very good chance the this stylesheet file is being loaded before other stylesheet files and then those that are loaded after have some rules that override the rules in your post. 如果您将此代码放在另一个样式表文件中，则很有可能在其他样式表文件之前加载此样式表文件，然后加载那些后面加载的样式文件具有覆盖帖子中规则的规则。 Look into the order of how the stylesheets are loaded. 查看样式表的加载顺序。 Basically, the last rule will determine how the element will look on the screen. 基本上，最后一条规则将决定元素在屏幕上的外观。
ie 即
#wrapper {
display: block;
}
#wrapper {
display: none;
}
The #wrapper element will not be displayed because the of the last rule. #wrapper元素将不会显示，因为最后一条规则。 Note: There is a way to make the rules above work by using !important , however, that is not recommended practice. 注意：有一种方法可以使用!important来使上述规则工作，但是，这不是推荐的做法。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.