并排Div没有对齐

时间：2013-03-04 23:08:54

标签： html css positioning

我一整天都在寻找解决方案。可能有一个，但我不理解CSS和DIV的解释。

非常感谢链接或帮助。我试图将DIV并排放在一个包装器中，我无法弄清楚它们为什么不排队。

感谢您的帮助。 〜Donavon

左标题= 75％，右标题= 25％，因此应该等于包装的100％，即95％。但正确的标题正在包装。

和

左，中，右portlet部分应该在同一行上对齐.. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <title>test-columns</title>

    <style type="text/css">
    #buttons {
       border:             1px solid;
       text-align:         center;
       width:              95%;
       margin:             0 auto;
    }


    #container_heading {
       border:             1px solid;
       width:              95%;
       text-align:         center;
       margin:             0 auto;
    }

    #left_heading {
      border:             1px solid;
      float:              left;
      width:              75%;
      text-align:         center;
      margin:             0; 
      padding:            0;
    }

    #right_heading {
      border:             1px solid;
      float:              right;
      width:              25%;  
      text-align:         center;
      margin:             0; 
      padding:            0;
    }


    #controls {
      clear:              both;
      border:             1px solid;
      text-align:         center;
      width:              95%;
      margin:             0 auto;
    }



    #sections {
      border:             1px solid;
      margin:             0px auto;
      width:              95%;
    }

    #left_portlets {
      border:             1px solid;
      text-align:         center;
      float:              left;
      width:              33%;
      margin:             0 auto;
    }

    #middle_portlets {
      border:             1px solid;
      text-align:         center;
      width:              33%;
      margin:             0 auto;
    }

    #right_portlets {
      border:             1px solid;
      text-align:         center;
      float:              right;
      width:              33%;
      margin:             0 auto;
    }


</style>



</head>

<body style="margin: 0" >

  <div id="buttons"> 
    Buttons
  </div>

  <br /><br />


  <div id="container_heading">   
    <div id="left_heading"> 
      Left Heading
    </div>

    <div id="right_heading"> 
      Right Heading
    </div>
  </div>  

  <br /><br />

  <div id="controls"> 
    Controls
  </div>

  <br /><br />


  <div id="sections">
    <div id="left_portlets">
      <div id="1-1_portlet">
        1-1 Portlet
      </div>

      <div id="1-2_portlet">
        1-2 Portlet
      </div>

      <div id="1-3_portlet">
        1-3 Portlet
      </div>
    </div>

    <div id="middle_portlets">
      <div id="2-1_portlet">
        2-1 Portlet
      </div>

      <div id="2-2_portlet">
        2-2 Portlet
      </div>

      <div id="2-3_portlet">
        2-3 Portlet
      </div>    
    </div>

    <div id="right_portlets">
      <div id="3-1_portlet">
        3-1 Portlet
      </div>

      <div id="3-2_portlet">
        3-2 Portlet
      </div>

      <div id="3-3_portlet">
        3-3 Portlet
      </div>
    </div>
  </div>

</body>
</html>

+ ---------------------------------------------- ----------------------------------- +

编辑：
哇。这有助于......

我从宽度中取出一个百分点来补偿边框，并添加了“display：inline-block;”排在彼此旁边的div和“box-sizing：border-box;”整个样式表。

事情正在排成行。但是现在我怎么能在外边缘上升所以一切都是正方形的？每次我做一点改变，布局都会中断。 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>test-columns</title>

<style type="text/css">
/* apply a natural box layout model to all elements */
* { -moz-box-sizing:    border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing:         border-box; }


#buttons {
  border:             1px solid;
  text-align:         center;
  width:              95%;
  margin:             0 auto;
}


#container_heading {
  border:             0px;
  width:              95%;
  text-align:         center;
  margin:             0 auto;
}

#left_heading {
  border:             1px solid;
  width:              74%;
  text-align:         center;
  margin:             0; 
  padding:            0;
  display:            inline-block;
}

#right_heading {
  border:             1px solid;
  width:              24%;  
  text-align:         center;
  margin:             0; 
  padding:            0;
  display:            inline-block;
}


#controls {
  clear:              both;
  border:             1px solid;
  text-align:         center;
  width:              95%;
  margin:             0 auto;

}

#sections {
  border:             0px;
  margin:             0px auto;
  width:              95%;
  text-align:         center;
}

#left_portlets {
  border:             1px solid;
  text-align:         center;
  width:              31%;
  margin:             0 auto;
  display:            inline-block;
}

#middle_portlets {
  border:             1px solid;
  text-align:         center;
  width:              31%;
  margin:             0 auto;
  display:            inline-block;
}

#right_portlets {
  border:             1px solid;
  text-align:         center;
  width:              31%;
  margin:             0 auto;
  display:            inline-block;
}

</style>



<script type="text/javascript" language="javascript">
</script>

</head>

<body style="margin: 0" >

  <div id="buttons"> 
    Buttons
  </div>




  <div id="container_heading">   
    <div id="left_heading"> 
      Left Heading
    </div>

    <div id="right_heading"> 
      Right Heading
    </div>
  </div>  



  <div id="controls"> 
    Controls
  </div>




  <div id="sections">
    <div id="left_portlets">
      <div id="1-1_portlet">
        1-1 Portlet
      </div>

      <div id="1-2_portlet">
        1-2 Portlet
      </div>

      <div id="1-3_portlet">
        1-3 Portlet
      </div>
    </div>

    <div id="middle_portlets">
      <div id="2-1_portlet">
        2-1 Portlet
      </div>

      <div id="2-2_portlet">
        2-2 Portlet
      </div>

      <div id="2-3_portlet">
        2-3 Portlet
      </div>    
    </div>

    <div id="right_portlets">
      <div id="3-1_portlet">
        3-1 Portlet
      </div>

      <div id="3-2_portlet">
        3-2 Portlet
      </div>

      <div id="3-3_portlet">
        3-3 Portlet
      </div>
    </div>
  </div>

</body>
</html>

4 个答案:

答案 0 :(得分：0)

这是导致问题的边界，因为它增加了框的大小（75％+ 2px，每边1px）。你可以包括这个：

#left_heading,#right_heading,[anything else %-width and has borders] {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}

这将通过使盒子符合包括边框的禁止宽度来纠正它，但请注意它只适用于IE8 +（显然符合标准的那些）。 IE7-您需要包含some crazy shim。对于apply to everything来说这是一个很好的策略，因为它会在块项目上为CSS节省很多麻烦。

您可能想要考虑的其他事情是使用display:inline-block;而不是浮点数。这与box-sizing:border-box;的范围相同（仅适用于IE8 +，但是zoom:1; *display:inline;的IE7-后备功能相同），但是它将来会创建更多可自定义选项。如果您添加了新标题怎么办？现在你需要改变你的宽度和浮动......但如果一切都是内联块，你可以改变宽度而你是金色的。然后，您还可以在一个类声明中分配显示，而不是为不同的项目放置分配不同的浮动。

只是值得深思。

答案 1 :(得分：0)

删除边框（将其推过100％）并浮动中间方块。

一旦你这样做，他们都会落实到位......

答案 2 :(得分：0)

问题是您将边框样式与宽度结合使用，因为边框围绕元素的外部延伸。由于行中元素的组合宽度加起来为100％，因此应用边框会强制调整它以使所有元素都适合页面。

答案 3 :(得分：0)

要解决您的问题，您应该删除border因为边框也影响1px right and left 2px变为4px等效border的宽度两个盒子，原因是盒子没有对齐，因为你已经有100％的宽度，没有4px的空间。

要使两个div对齐，您应该删除width或调整 #left_heading { float: left; width: 75%; text-align: center; margin: 0; padding: 0; } #right_heading { float: right; width: 25%; text-align: center; margin: 0; padding: 0; } 

{{1}}
相关问题
最新问题