0

我在母版页上设置了一个内容占位符，当我调整浏览器窗口的大小时，它不会留在原位。当我缩小浏览器窗口时，内容占位符会移动到它应该位于右侧的 div 下方。

这是将相关div的位置设置为绝对的问题吗？还是有什么我没有考虑到的？

提前致谢

<div class="header">
    <h2>Intranet</h2>
</div>
</div>
    <div>
        <div class="leftcontent">
            <ul>
                <li>
                    <a id="lnkbtnAddUpdate" href="javascript:__doPostBack(&#39;ctl00$lnkbtnAddUpdate&#39;,&#39;&#39;)">Add/Update Job Listing</a></li>
                <li>
                    <a id="lnkbtnReview" href="javascript:__doPostBack(&#39;ctl00$lnkbtnReview&#39;,&#39;&#39;)">Review Applicants</a></li>
                <li>
                    <a id="LinkButton3" href="javascript:__doPostBack(&#39;ctl00$LinkButton3&#39;,&#39;&#39;)">Interview Results</a></li>
                <li>
                    <a id="LinkButton4" href="javascript:__doPostBack(&#39;ctl00$LinkButton4&#39;,&#39;&#39;)">Applicant Search</a></li>
            </ul>
        </div>
        <div class="maincontent">


<div class="addupdate">

    <div class="lbljobtitle">
        <span id="ContentPlaceHolder1_lblJobTitle">Job Title</span>
    </div>

    <div class="txtjobtitle">
        <input name="ctl00$ContentPlaceHolder1$txtJobTitle" type="text" id="ContentPlaceHolder1_txtJobTitle" style="height:22px;width:250px;" />
    </div>

    <div class="lblemployeetype">
        <span id="ContentPlaceHolder1_lblEmployeeType">Employee Type</span>
    </div>

    <div class="txtemployeetype">
        <input name="ctl00$ContentPlaceHolder1$txtEmployeeType" type="text" id="ContentPlaceHolder1_txtEmployeeType" style="height:22px;width:250px;" />
    </div>

    <div class="lbllocation">
        <span id="ContentPlaceHolder1_lblLocation">Location</span>
    </div>

    <div class="txtlocation">
        <input name="ctl00$ContentPlaceHolder1$txtLocation" type="text" id="ContentPlaceHolder1_txtLocation" style="height:22px;width:250px;" />
    </div>

    <div class="lbljobdescription">
        <span id="ContentPlaceHolder1_lblJobDescription">Job Description</span>
    </div>

    <div class="txtjobdescription">
        <input name="ctl00$ContentPlaceHolder1$txtJobDescription" type="text" id="ContentPlaceHolder1_txtJobDescription" style="height:160px;width:250px;" />
    </div>

    <div class="lblrequirements">
        <span id="ContentPlaceHolder1_lblRequirements">Requirements</span>
    </div>

    <div class="txtrequirements">
        <input name="ctl00$ContentPlaceHolder1$txtRequirements" type="text" id="ContentPlaceHolder1_txtRequirements" style="height:160px;width:250px;" />
    </div>

    <div class="lblexperience">
        <span id="ContentPlaceHolder1_lblExperience">Experience</span>
    </div>

    <div class="txtexperience">
        <input name="ctl00$ContentPlaceHolder1$txtExperience" type="text" id="ContentPlaceHolder1_txtExperience" style="height:22px;width:250px;" />
    </div>
    <input type="submit" name="ctl00$ContentPlaceHolder1$btnSubmit" value="Post Job" id="ContentPlaceHolder1_btnSubmit" />
</div>

        </div>
    </div>

</form>
<div class="footer">
    <h5>Footer Goes Here</h5>
</div>


* {
font-family: Tahoma;
}

.lbljobtitle, .lblemployeetype, .lbllocation, .lbljobdescription, .lblrequirements, .lblexperience {
    float: left;
    width: 200px;
    height: 20px;
}

.header {
    width: 100%;
    height: 86px;
    background-color: #053A54;
    color: #FFFFFF;
}

h2 {
    padding: 25px;
    float: left;
    margin-bottom: -20px;
}

h5 {
    text-align: right;
}

.leftcontent {
    width: 200px;
    height: 700px;
    float: left;
}

    .leftcontent ul {
        list-style: none;
    }

    .leftcontent li {
        padding: 5px;
    }

    .leftcontent a {
        display: block;
        padding: 0.5em;
        border: 1px solid #CCC;
        color: #053A54;
    }

.maincontent {
    width: 700px;

}

.footer {
    clear: both;
    color: #FFFFFF;
    background-color: #053A54;
    width: 100%;
}

.addupdate {
    float: left;
    position: absolute;

}
4

0 回答 0