Question

当我从使用模板布局转换到编写自己的css脚本时，我遇到了很多问题，但有一个阻止我继续。我已经成功创建了一个带有浮动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>

Answer 1

在CSS中，您为.chromestyle ul设置了固定宽度。将该宽度更改为％，这应该可以解决您的问题。

Answer 2

您链接的文章的第一个答案为您提供了最合理的解决方案：“您可以使用另一个您希望在其中查看页面的最小宽度的div来包围这两个div。”尝试将页面适合320x240浏览器没有多大意义;在这种分辨率下无法避免滚动条。

像这样的东西

.foowrap { min-width: 550px; width: 100%; overflow:auto; }
.foo { width:30%; float:left; }

<div class="foowrap">
    <div class="foo">bar</div>
    <div class="foo">baz</div>
    <div class="foo">bum</div>
</div>

然后确保内部div的总最小宽度（示例中的类foo）不超过您设置的最小宽度。特别注意边界。

顺便说一下，你有两个</body>并且你正在使用<center>，这两个都是你应该避免的。这一点也没有多大意义：<br><tr>text/other</br></tr>

窗口大小调整时浮动div问题

2 个答案: