Question

它不允许我发布图片，但是如果你能看到这个：http://i49.photobucket.com/albums/f272/huntmur/DIV-QUES.gif

我认为这会更清楚，

D2，D3＆amp; D4彼此相邻，并始终以屏幕为中心。（960px）
D2-680px，D3-10px，D4-270px （所有三个在一起并且必须在屏幕上居中）

D1和D5必须根据屏幕宽度进行调整
此外，如果用户浏览器宽度大于1200px，则还将使用D1
我只在这里包含一个D5用于居中目的（因为不幸的是我只考虑表格.D5不会真的被使用。）

为了帮助您更好地理解，我有一个我写的粘滞便笺应用程序并想要放在网站上。通常所有音符都必须留在680 div内，但如果他们的浏览器是1200px我我们也想让他们把它们放在左栏（D1）中。

所以我想做的事情（作为一种解决方法）是使用我上面的代码（960区域）将三列居中......而且，如果浏览器，我只会在div（D1）上进行分层 - 宽度至少为1200px。 [我对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）上。

Answer 1

我认为这些想法中的任何一个都不是完全你想要的，但希望其中一个足够接近。

创意＃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更新我的答案。~~

CSS定位问题（了解浮动边距 - 左/右/自动）

1 个答案: