当我从使用模板布局过渡到编写自己的 css 脚本时，我遇到了很多问题，但有一个问题阻止我继续。我已经成功地创建了一个带有 float div 的 3 列布局，但是在浏览器重新调整大小时，右列覆盖了中间的 div。我已经导入了在 Div sections shifts when i resize the window 上找到的脚本没有成功。基本上我希望布局表现得像当前的布局，位于 http://www.allstarselectric.com。 , 但使用 %.我正在使用 % 来支持交叉分辨率，那么是否有解决方法/解决方案，或者像素是否绝对必要？任何帮助将不胜感激。
CSS:
body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
color: #666;
font-family: Tahoma, Geneva, sans-serif;
font-size: 13px;
line-height: 1.7em;
background-color: #4a4d51;
background-image: url(images/templatemo_body.jpg);
background-repeat: repeat-x;
background-position: top
}
.content{
position: fixed;
width: 100%;
height: 100%;
background-image: url(images/templatemo_body.jpg);
}
.contentbody{
float: left;
width: 70%;
height: 100%;
}
.wrapper {
width:100%
}
.sidebar{
float: left;
width: 15%;
height: 100%;
border: 0px solid #BBB;
background-color:#dddddd;
}
.sidebar li{
list-style-type:none;
margin:0;
padding:0;
}
.sidebar2{
float: left;
width: 15%;
height: 100%;
border: 0px solid #BBB;
background-color:#dddddd;
}
.sidebar2 li{
list-style-type:none;
text-align: center;
margin:0;
padding:0;
}
.chromestyle{
width: 100%;
font-weight: bold;
}
.chromestyle:after{ /*Adds margin between menu and rest of content in Firefox*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/*Affects the background/menustyle*/
.chromestyle ul{
border: 0px solid #BBB;
width: 730px;
height: 45px;
background: url(imgs/navm.jpg) center center no-repeat; /*THEME CHANGE HERE*/
padding: 0 15px;
margin: 0;
text-align: left; /*set value to "left", "center", or "right"*/
}
.chromestyle ul li{
display: inline;
}
/*Affects menu text*/
.chromestyle ul li a{
float: left;
display: block;
color: #000;
padding: 8px 20px;
margin: 0 1px 0 0;
text-decoration: none;
border: none;
}
.chromestyle ul li a:hover, .chromestyle ul li a.selected{ /*script dynamically adds a class of "selected" to the current active menu item*/
color: #fff;
background: #ff0011
center center repeat-x; /*THEME CHANGE HERE*/
}
.current { color: #fff; background: ; }
/* ######### Style for Drop Down Menu ######### */
.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #BBB; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: #d5a30b;
width: 200px;
visibility: hidden;
}
.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: black;
}
* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
}
.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #F0F0F0;
}
HTML:
<html>
<head>
<title>Allstars Electric</title>
<meta name="keywords" content="electricians," />
<meta name="description" content="Electrical Contractor DFW" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/drop.js">
</script>
<style type="text/css">
<!--
.style2 {color: #FFFF00}
.style3 {
font-size: 36px
}
-->
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
function JumpToIt(list) {
var newPage = list.options[list.selectedIndex].value
if (newPage != "None") {
location.href=newPage
}
}
//-->
</SCRIPT>
</head>
<body>
<div class="wrapper">
<div class="sidebar" id="sidebar"><li>home</li></div>
<div class="contentbody">
<center>
<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="index.html" class="current">Home</a></li>
<li><a href="specialoffers.html">Special Offers</a></li>
<li><a href="#" rel="dropmenu2">Services</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="#" rel="dropmenu3">Themes</a></li>
</ul>
</div>
<!--1st drop down menu -->
<div id="dropmenu1" class="dropmenudiv">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
</div>
<!--2nd drop down menu -->
<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
<a href="electrical.html">Electrical</a>
<a href="hvac.html">Heating & Air Conditioning</a>
</div>
<!--3rd drop down menu -->
<div id="dropmenu3" class="dropmenudiv" style="width: 150px;">
<a href="http://www.allstarselectric.com/index.html">Dark</a>
<a href="http://www.allstarselectric.com/light/index.html">Light</a>
</div>
<!-- Dropdown End -->
<br><tr>text/other</br></tr>
</center>
</body>
</div>
</div>
<div class="sidebar2" id="sidebar2"><li>Home</li>
<script type="text/javascript">
cssdropdown.startchrome("chromemenu")
</script>
</div>
</body>
</html>
最佳答案
在您的 CSS 中，您为 .chromestyle ul 设置了固定宽度。将该宽度更改为 %，这应该可以解决您的问题。
关于html - 窗口调整大小时 float div 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10200341/