0

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

链接或帮助将不胜感激。我试图将 DIV 并排放置在包装器中，但我不知道为什么它们不对齐。

谢谢您的帮助。~多纳文

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

和

Left、Middle 和 Right 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

4 回答 4

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-你需要包括一些疯狂的垫片。这是一个适用于所有内容的好策略，因为它可以为块项目上的 CSS 省去很多麻烦。

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

只是思考的食物。

于 2013-03-04T23:11:40.667 回答
0

移除边框（将其推到 100% 以上）并浮动中间的方块。

一旦你这样做，它们就会全部到位......

于 2013-03-04T23:11:42.183 回答
0

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

于 2013-03-04T23:14:17.493 回答
0

要解决您的问题，您应该删除border因为边框也会影响您的宽度，1px它在两个盒子中right and left变得2px等同4px于导致盒子不对齐的原因，因为您已经有 100% 的宽度并且没有 4px 的空间。

要使两个 div 对齐，您应该消除border或调整您的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;
    }
于 2013-03-05T01:12:55.487 回答