Question

我试图让id =“contact_details”的部分出现在旁边的id =“form”旁边。它适用于我的一个CSS样式表，但不适用于另一个。我不知道我哪里出错了......我尝试过它，有相对位置，不同宽度等等。

非常感谢您的帮助！干杯，玛丽

   #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>

Answer 1

看起来不错......

如果您将此代码放在另一个样式表文件中，则很有可能在其他样式表文件之前加载此样式表文件，然后加载那些之后加载了一些规则以覆盖帖子中的规则的样式表文件。查看样式表的加载顺序。基本上，最后一条规则将决定元素在屏幕上的外观。

即

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

#wrapper元素将不会显示，因为最后一条规则。注意：有一种方法可以使用!important使上述规则有效，但不建议这样做。

为什么我的“漂浮：离开;”不行？

1 个答案: