CSS定位问题了解浮动的边距为左/右/自动

问题描述

| 它不会让我发布图像，但是如果您可以看到此图像，则在这里：http://i49.photobucket.com/albums/f272/huntmur/DIV-QUES.gif 我认为这会更清楚， D2，D3和D4一直相邻且始终位于屏幕中央。（960像素） D2-680px，D3-10px，D4-270px（所有三个在一起且必须在屏幕上居中） D1和D5必须根据屏幕宽度进行调整。 另外，如果用户浏览器的宽度大于1200px，则也将使用D1。 香港专业教育学院仅在此处包括一个D5以便居中（因为不幸的是，我只是在表方面考虑。D5不会真正使用。） 为了帮助您更好地理解，我编写了一个便笺应用程序，并希望将其放置在网站上。通常，所有注释都必须保留在680 div之内，但是如果它们的浏览器是1200px， 还要允许他们将它们放在左列（D1）中。 所以我想做的是（将其作为解决方法）将三列与上面的代码（960区域）居中对齐。并且，如果浏览器宽度为1200px，我将仅在div（D1）上分层至少。 [我对d1层宽度的计算将是（browserWidth-960 / 2）]。

<style>
    BODY {margin:0px;padding:0px;}<BR>
    #container {width:960px;margin-left:auto;padding:0px;margin-right:auto;height:60px;}<BR>
    #dx {width:690px;}<BR>
    #d2 {background-color:#ff0000;margin:0px;padding:0px;width:680px;height:60px;}<BR>
    #d3 {background-olor:#00ff00;margin:0px;padding:0px;width:10px;height:60px;float:right;}<BR>
    #d4 {background-color:#0000ff;margin:0px;padding:0px;width:270px;height:60px;float:right;}<BR>
</style>

<div id=\"container\"><BR>
  <div id=\"d4\"><BR>
   &nbsp;<BR>
  </div><BR>
  <div id=\"dx\"><BR>
      <div id=\"d3\"><BR>
       &nbsp;<BR>
      </div><BR>
      <div id=\"d2\"><BR>
       &nbsp;<BR>
      </div><BR>
  </div><BR>

换句话说，我不能弄乱960区域（因为那是该站点），但是如果他们的屏幕足够宽，我也想让他们也将粘性物放在左侧列（D1）上。     

解决方法

        我认为这些想法都不是您想要的，但希望其中一个想法足够接近。 想法2：http：//jsfiddle.net/DXmLE/ HTML：

<div id=\"container\">
    <div id=\"d1\">d1</div>
    <div id=\"d2\">d2</div>
    <div id=\"d3\">d3</div>
    <div id=\"d4\">d4</div>
    <div id=\"d5\">&nbsp;</div>
</div>

CSS：

html,body {
    margin: 0;
    padding: 0
}
#container {
    width: 100%;
    display: table;
    table-layout: fixed
}
#container > div {
    display: table-cell;
    height:60px
}
#d1,#d5 {
    overflow: hidden
}
#d2 {
    background-color: #f00;
    width: 680px
}
#d3 {
    background-color: #0f0;
    width: 10px
}
#d4 {
    background-color: #00f;
    width: 270px;
}

想法1：http：//jsfiddle.net/PnujB/ 如果可以接受，我将使用相应的HTML / CSS更新答案。