Question

我正在为Web应用程序创建Web用户界面。界面有页眉，页脚和水平线两个矩形之间。矩形由空格分隔。所有这些功能都是使用标签创建的。下面给出了CSS来格式化左边的矩形：

#sidebar1 {    
    position: absolute; 
    left: 150px;
    width: 450px;          
    height:250px;
    background: #EBEBEB; 
    padding: 20px 0; 
        padding-left:20px;
        padding-right:20px;
    margin: 50px auto;
        border: 1px solid #000000;

}

问题在于，当您挤压或延伸浏览器窗口时，这些矩形会改变位置或相互重叠。这是不可接受的。我在CSS中尝试过其他position关键字选项，例如position：fixed或position：relative或static但是表示仍然是错误的。同样我尝试浮动：左和浮动：右，但仍然使矩形移动和重叠。我希望那些矩形能够保持静止，尽管你正在伸展或挤压窗户。请问您有什么解决方案？最好的问候 enter image description here

当前代码：

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Welcome to Spring Web MVC project</title>
    <style type="text/css"> 


body {
    font: 100% Verdana, Arial, Helvetica, sans-serif;   
    margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
    /*padding: 0;
    text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
    color: black;
} 

 #header { 
    background: green;         
      /*  top: 100px; */
        text-align: center;
    margin: 55px;        
    padding: 0 10px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
} 


#sidebar1 {    
    position: absolute;         
        left: 150px;
    width: 450px; /* since this element is floated, a width must be given */
    height:250px;
    background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
    padding: 20px 0; /* top and bottom padding create visual space within this div */
        padding-left:20px;
        padding-right:20px;
    margin: 50px auto;
        border: 1px solid #000000;

}
 #sidebar2 {
    position: absolute;        
        right: 150px;
    width: 450px; /* since this element is floated, a width must be given */
    height: 250px;
    background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
    padding: 20px 0; /* top and bottom padding create visual space within this div */
        padding-left:20px;
        padding-right:20px;
    margin: 50px auto;
        border: 1px solid #000000;

}




 #footer { 
    padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
    background:green;
        width:95%;
        margin:55px;
        position: relative;
        bottom: -300px;;

} 

.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
    clear:both;
    height:0px;
    font-size: 1px;
    line-height: 0px;
}


</style><!--[if IE]>
<style type="text/css"> 
/* place css fixes for all versions of IE in this conditional comment */
.thrColHybHdr #sidebar1, .thrColHybHdr #sidebar2 { padding-top: 30px; }
.thrColHybHdr #mainContent { zoom: 1; padding-top: 15px; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]--></head>

<body>
<div id="header">
    <h1>Header</h1>
  <!-- end #header --></div>
<!--<div id="container"> -->

 <div id="sidebar1">
    <h3>blah blah</h3>
    <p><li>blah blah</li> </p>
    <p><li>blah blah</li> </p>
    <p><li>blah blah</li></p>
  <!-- end #sidebar1 --></div> 

 <div id="sidebar2">
    <h3>blah blah</h3>
    <p><li>blah blah</li> </p>
    <p><li>blah blah </li></p>
    <p><li>blah blah</li></p>
  <!-- end #sidebar2 --></div>
  <p>
    <!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats -->
  </p>


  <p><br class="clearfloat" />
  </p>
  <div id="footer">
    <p>Footer</p>
    <p>Terms & Conditions</p>

  <!-- end #footer --></div>
<!-- end #container --> <!--</div> -->
</body>
</html>

Answer 1

没有理由在这里绝对定位......这只会导致头痛。一般来说，只有在绝对必要时才做绝对位置，这对我来说几乎完全是因为我必须将某些东西漂浮在其他东西之上。否则，一切都是相对于其他东西，默认情况下。

以下是一项简单的策略：

<div class="pagecontainer">
     <div class="header">
       Header Goes Here
     </div>

     <div class="bodycontainer">
        <div class="floatleft">Leftbox</div>
        <div class="floatleft">Rightbox</div>
        <div class="clear"></div>
     </div>

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

风格如下：

.floatleft {
   float: left;
   otherstyle: here;
   margin: 5px;
}

.clear {
   clear:both;
}

是的，这是抽象的，所以你必须根据你的特定目的进行自定义。

避免重叠的关键是确保body容器内的div不会超过bodycontainer父元素的大小（不要忘记边距，在某些情况下，填充（愚蠢的IE）计数到该值）并且两者都是之后漂浮着漂浮的漂浮物。

如果您想让它变得简单，请使用960.gs

等网格

在XHTML页面上定位对象

1 个答案: