我遇到一个问题，在div左下方的div包裹它是并排的，我希望div变窄，直到它与菜单栏并排，然后停止移动但不包裹。
我有两个div并排，左边的div是菜单栏，右边的div是用于在网站上输入内容的div。左边的div设置为宽度的16％，右边的div设置为宽度的86％。当我使浏览器窗口变窄时，它会调整大小变窄，直到主页div包裹在菜单栏div下面。我想阻止下面的div包裹。
HTML
<html>
<head>
<meta content="en-gb" http-equiv="Content-Language">
<title>rthrhtdrhrth</title>
<link href="style.css" rel="stylesheet" type="text/css">
<style type="text/css">
.auto-style30 {
font-size: medium;
text-align: left;
}
.auto-style32 {
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
}
</style>
</head>
<body>
<!--In this site the design code is the same for each page such as the menubar, and banners however the mainpage content will be
different for each page as it contains that pages individual content.
<!--The below bannerdiv div, is the div that contains the top banner picture for the sight.
percentages are used throughout the site to maintain a liquid layout. -->
<div id="bannerdiv" align="left" title="Banner">
<img alt="z" height="114" src="Untitled3.jpg" width="100%"></div>
<div id="container">
<h3 id="container" class="auto-style4">ythtytytyytht</h3>
<!--The container div is used to create top green line. --></div>
<div id="menubar" align="center" style="width: 16%; height: 100px;" title="menu">
<!-- 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="">
<img alt="logo" height="63" src="images/ClevelandLogo.gif" width="126"></li>
<li><a auto-style5"="" href="index.html" style="height: 20px; class=">Home</a></li>
<li><a href="general.html">General</a></li>
<li><a href="map.html">Site map</a></li>
<li><a href="rules.html">Rules & Procdures</a></li>
<li><a href="enviro.html" style="height: 20px">Envirommental</a></li>
<li><a href="energy.html">Energy</a></li>
<li><a href="it.html">IT</a></li>
<li><a href="sap.html">SAP</a></li>
<li><a href="purchasing.html" style="height: 20px; width: 180px;">Purchasing</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">Teesdock</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; width: 84%; float: right; color: #000000; font-size: 11pt;">
</div>
<!-- The container1 div is used to create the bottom green line in the site -->
</div>
<h3 id="container1" class="auto-style4" style="width: 100%"></h3>
</div>
<br>
<!-- Picturecontainer2 contains the image that creates the bottom site banner. -->
<div id="picturecontainer2" style="float: left;">
<img alt="z" height="114" src="da.png" width="100%"></div>
</div>
</body>
</html>
CSS：
#container {
overflow-x:hidden;
margin: 0px;
background-color: #008852;
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
color: #FFFFFF;
text-align: left;
max-width: 10%;
}
#main
{
overflow-x:hidden;
height: 100%;
weight: 100&;
}
html, body {
overflow-x: hidden;
height: 100%;
}
#picturecontainer1{
float: left;
}
#menubar
ul
{
list-style-type: none;
margin: 0;
padding: 0;
float: left;
margin-right: 30px
}
#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;
}
#mainpage {
border: thin solid #008852;
width: 84%;
float: none;
background-color: #EDEFEE;
height: auto;
border-radius: 20px;
height: 100%;
position: fixed;
color: #008852;
clear: none;
}
#menubar a:hover, #menubar a:active
{
background-color: #7A991A;
}
#menubar {
border-width: 1px;
border-style: none;
font-size: xx-small;
width: 50%;
margin-top: 11px;
float: left;
vertical-align: 0%;
}
#bannerdiv
{
margin-bottom: 20px;
}
.newStyle1 {
text-align: left;
}
footer {
font-family: Arial, Helvetica, sans-serif;
text-align: left;
background-color: #008852;
}
.auto-style1 {
text-align: center;
margin-left: 0px;
margin-top: 11px;
font-family: Georgia;
margin-right: 0px;
}
s
#bannerdiv {
text-align: center;
}
.auto-style4 {
margin-left: 0px;
text-align: left;
}
.auto-style5 {
margin-top: 0px;
}
.auto-style8 {
text-align: left;
font-size: xx-small;
}
.auto-style6 {
text-align: left;
font-size: xx-small;
font-weight: bold;
}
.auto-style10 {
margin-left: 0px;
}
.auto-style12 {
text-align: left;
font-size: xx-small;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}
.auto-style11 {
font-family: Arial, Helvetica, sans-serif;
}
.auto-style9 {
font-family: "Franklin Gothic Medium";
position: fixed;
}
#container1 {
font-family: Arial, Helvetica, sans-serif;
margin-top: 20px;
background-color: #008852;
clear: right;
}
#table {
}
#mainpage a:link, #mainpage a:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: small;
font-weight: bold;
}
#picturecontainer2 {
border-style: none;
float: left;
position: static;
clear: none;
display: inline;
vertical-align: top;
clear: both;
}
#picturecontainer1 {
border-style: none;
width: 126px;
border-right-width: thick;
border-bottom-width: thick;
border-left-width: thick;
}
.auto-style20 {
text-align: center;
}
.auto-style21 {
border-collapse: collapse;
border-width: 0px;
background-color: #EDEFEE;
}
.auto-style19 {
text-align: left;
font-size: small;
font-family: Arial, Helvetica, sans-serif;
}
.auto-style17 {
text-align: left;
font-size: x-small;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}
.auto-style15 {
text-align: left;
font-size: x-small;
font-weight: normal;
}
.auto-style18 {
text-align: left;
font-size: 12pt;
}
#mainpage a:link, #mainpage a:visited {
}
.auto-style23 {
font-family: Arial, Helvetica, sans-serif;
font-size: 11pt;
a text-decoration: none;
}
.auto-style14 {
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
}
#picturecontainer2 img, #bannerdiv img {
overflow: hidden;
width: 100%;
}
.auto-style21 {
font-weight: normal;
}
#picturecontainer2 {
border-style: none;
float: left;
}
.auto-style14 {
text-align: center;
}
.auto-style15 {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
}
#mainpage a:hover a: active {
font-family: Arial, Helvetica, sans-serif;
}
.auto-style25 {
text-align: left;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}
.auto-style26 {
text-align: left;
font-size: x-small;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}
.auto-style38 {
font-size: medium;
text-align: center;
}
.auto-style27 {
text-align: left;
font-size: small;
font-family: Arial, Helvetica, sans-serif;
}
.auto-style24 {
text-align: center;
}
p, h2, h3, h4, td, a {
color: #008852;
font-family: Arial, Helvetica, sans-serif;
}
.auto-style14 {
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
}
.auto-style15 {
text-align: left;
font-size: 9pt;
font-weight: normal;
}
.auto-style17 {
text-align: left;
font-size: 9pt;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}
.auto-style18 {
text-align: left;
font-size: 12pt;
}
.auto-style19 {
text-align: left;
font-size: small;
font-family: Arial, Helvetica, sans-serif;
}
#picturecontainer2 {
border-style: none;
float: left;
}
.auto-style20 {
text-align: left;
font-size: 9pt;
font-family: Arial, Helvetica, sans-serif;
}
.auto-style21 {
font-weight: normal;
}
#query {
height: 200px;
}
.auto-style30 {
font-size: medium;
text-align: left;
}
.auto-style32 {
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
}
.auto-style14 {
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
}
.auto-style15 {
text-align: left;
font-size: 9pt;
}
.auto-style17 {
text-align: left;
font-size: 9pt;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}
.auto-style18 {
text-align: left;
font-size: 12pt;
}
.auto-style19 {
text-align: left;
font-size: small;
}
#picturecontainer2 {
border-style: none;
float: left;
}
#wrapper {
min-width:100%
}
答案 0 :(得分：0)
首先删除您position:fixed上的#mainpage，看看它对您有何帮助。你确实有很多样式，这使得很难排除故障。你应该首先获得你的定位设置，然后在你正确布局后添加漂亮的东西（恕我直言）。