0

我正在使用下面的代码并遇到一个问题，如果我调整浏览器的大小，我的主页 div 会包裹在菜单栏 div 下方，我尝试了最小和最大宽度，但没有任何效果。任何帮助将不胜感激。我希望主页 div 不会掉到菜单栏下方并与它并排，即使浏览器变小也是如此。

HTML：

<div id="menubar" style="width: 16%; height: 100px;" title="menu" align = "center"> <!-- This is the code for the menubar, to add a new option to the menubar-->
                                                                                    <!-- Add a new <li> tag below the bottom link, to delete a link, delete the desired
                                                                                    link element. -->
    <ul>
        <li style="align: center;"><img alt="logo" height="63" src="images/ClevelandLogo.gif" width="126" /></li>
        <li ><a href="index.html" style="height: 20px;" class="auto-style5">Home</a></li>
        <li><a href="rthyth.html">General</a></li>
        <li><a href="rhtrhrthrth">Site map</a></li>
        <li><a href="thrrthrthtr">Rules & Procdures</a></li>
        <li><a href="rth" style="height: 20px">Envirommental</a></li>
        <li><a href="rth">Energy</a></li>
        <li><a href="rhtrhrth">IT</a></li>
        <li><a href="rthtrhrt">SAP</a></li>
        <li><a href="rthtrhtrhtrhtrh.html" style="height: 20px; width: 180px;">rhtrhtrh</a></li>
        <li><a href="quality.html">Quality</a></li>
        <li><a href="safety.html">Safety</a></li>
        <li><a href="hr.html">Human resources</a></li>
        <li><a href="prod.html">Production</a></li>
        <li><a href="eng.html">Engineering</a></li>
        <li><a href="feedback.html">Feedback</a></li>
        <li><a href="tees.html">wrefwefwefwef</a></li>
        <li><a href="cmp.html">Company mobile phones</a></li>
        <li><a href="cms.html">Climate Survery Updates</a></li>
        <li><a href="training.html">Training</a></li>
        <li><a href="sports.html">Sports Dome</a></li>



    </ul>
</div>
<!--The mainpage div is where all the page's indivdual content is displayed.-->

<div id="mainpage" class="auto-style1" style="height: 486px;  float:left; color: #000000; font-size: 11pt;"> 
<p> -0je45iwgtjj4eg0prjegtgfjotrsjgse'[agpraeogjk-odetkgbokporgkspfkdgkpfdgkpdfkg</p>
</div>
<!-- The container1 div is used to create the bottom green line in the site -->

CSS：

#mainpage 
{
    border: thin solid #008852;
    width: 84%;
    float: left;
    background-color: #EDEFEE;
    height: auto;
    border-radius: 20px;
    height: 100%;
    position: fixed;
    color: #008852;
}

#mainpage a:link, #mainpage a:visited 
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    font-weight: bold;
}

#menubar ul
{
    list-style-type: none;
    margin: 0;
    padding: 0;
    float: left;
}

#menubar a:link, #menubar a:visited
{

    border-top-width: 1px;
    display: block;
    font-weight: bold;
    color: #000000;
    background-color: #EFF1EB;
    width: 180px;
    text-align: center;
    padding: 4px;
    text-decoration: none;
    text-transform: uppercase;
    border-style: solid;
    border-color: #638529;
    font-family: Arial, Helvetica, sans-serif;
    border: 1px;
    position: fixed;

}
4

3 回答 3

0

将两个 div 包装在另一个具有固定宽度的元素中。然后将菜单栏和主页面浮动到左侧。

div {
    width:50px;
    height:50px;
    border:1px solid black;
    float:left;
}
section {
    width:110px;
}

类似于以下内容：http: //jsfiddle.net/uBgg3/

于 2013-09-16T14:27:36.100 回答
0

您正在尝试构建的内容可以按如下方式完成。

<div id="menubar">
    <div class="logo"><img alt="logo" src="http://placehold.it/126x63" /></div>
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="rthyth.html">General</a></li>
        <li><a href="rhtrhrthrth">Site map</a></li>
        <li><a href="thrrthrthtr">Rules & Procdures</a></li>
        <li><a href="rth">Envirommental</a></li>
        <li><a href="rth">Energy</a></li>
        <li><a href="rhtrhrth">IT</a></li>
        <li><a href="rthtrhrt">SAP</a></li>
        <li><a href="rthtrhtrhtrhtrh.html">rhtrhtrh</a></li>
        <li><a href="quality.html">Quality</a></li>
        <li><a href="safety.html">Safety</a></li>
        <li><a href="hr.html">Human resources</a></li>
        <li><a href="prod.html">Production</a></li>
        <li><a href="eng.html">Engineering</a></li>
        <li><a href="feedback.html">Feedback</a></li>
        <li><a href="tees.html">wrefwefwefwef</a></li>
        <li><a href="cmp.html">Company mobile phones</a></li>
        <li><a href="cms.html">Climate Survery Updates</a></li>
        <li><a href="training.html">Training</a></li>
        <li><a href="sports.html">Sports Dome</a></li>
    </ul>
</div>
<div id="mainpage">
    <p>Some sample text...</p>
</div>

和CSS： 

#menubar {
    width: auto; 
    float: left;
    margin-right: 20px;
}
#mainpage {
    overflow: auto;
    border: thin solid #008852;
    background-color: #EDEFEE;
    height: auto;
    min-height: 500px;
    border-radius: 20px;
    color: #008852;
}
#mainpage a:link, #mainpage a:visited {
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    font-weight: bold;
}
#menubar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
#menubar a:link, #menubar a:visited {
    border-top-width: 1px;
    display: block;
    font-weight: bold;
    color: #000000;
    background-color: #EFF1EB;
    width: auto;
    text-align: center;
    padding: 4px;
    text-decoration: none;
    text-transform: uppercase;
    border-style: solid;
    border-color: #638529;
    font-family: Arial, Helvetica, sans-serif;
    border: 1px;
}

参见小提琴：http: //jsfiddle.net/audetwebdesign/sXNLT/

我清理了内联样式，因为它们妨碍了它们。使用 CSS 规则，更容易维护。

将您浮动#menubar到左侧并设置height:auto，以便您可以看到所有链接而不会出现任何溢出问题。

On #mainpage，无需浮动和设置overflow: auto以防止内容环绕浮动菜单。

最后，不需要position: fixed在您的导航链接中。

于 2013-09-16T15:06:52.067 回答
-1

您可以将两个 div 放在一个 html 表（2 列，1 行）中，并将 body 列的宽度设置为特定值或百分比。

于 2013-09-16T14:10:57.417 回答