控制div的宽度

你好，我试图建立一个流体设计，不知道为什么，但我不能继续工作的东西。所以如果调整窗口大小来调整div菜单的大小，而不是强制div到主题中的其他元素。控制div的宽度

这是我目前使用我的CSS

#stats-panel { 
    position: fixed; 
    background-attachment: scroll; 
    background-clip: border-box; 
    background-color: #ffffff; 
    background-image: none; 
    background-origin: padding-box; 
    background-position: 0% 0%; 
    background-repeat: repeat; 
    background-size: auto; 
    border: 2px solid #ffffff; 
    min-width: 680px; 
    max-width: 980px; 
    width: 100%; 
    -moz-border-radius: 8px; 
    border-radius: 8px; 
    margin-bottom: 0px; 
    margin-left: 10px; 
    margin-right: 420px; 
    margin-top: 0px; 
    padding-bottom: 2px; 
    padding-left: 10px; 
    padding-right: 10px; 
    padding-top: 10px; 
    top: 58px; 
    left: 0px; 
    right: auto; 
}

的代码时，我立交桥最大宽度这个div与他人格冲突，我能做些什么，以保持说这两个元素，但与20像素的保证金仍然允许这个div（stats-panel）在窗口调整大小时调整大小。

来源

2011-07-17 PT Desu

是一个要求上浆像素（可以切换到EM而非PX）？ –

不只是由于某种原因，我更习惯于px而不是它，但（px）不是必需的 –

这个网站有流体的CSS布局的许多很好的例子：http://www.glish.com/css/index.html

来源

2011-07-17 20:12:36

答案可能在于相对于其他要素。由于这个div有一个position:fixed它被带出正常流程，非常像绝对。它的位置是相对于浏览器窗口的，并且与其他元素的关系是不相关的。

您必须在某种程度上模拟此div与其他元素的关系行为，以便它们开始移动。有几种方法可以做到这一点，并取决于您当前的布局。

来源

2011-07-17 20:14:10

不太清楚整个布局是您的网页内容，但假设我们在寻找具有主体格和侧栏的div 2列布局，那么这可能是你可以做什么：

首先你的HTML文档中：

<div id="wrapper"> 

    <div id="main"> 
     <h2>This is the main body</h2> 
    </div> 

    <div id="sidebar"> 
     <h2>This is the sidebar</h2> 
    </div> 

</div>

下面就来CSS：

#wrapper{ 
    padding:0; 
    margin:0 auto; 
    min-width:940px; 
    max-width:1280px; 
} 

    #main{ 
     margin-left:0; 
     margin-right:280px; 
    } 

    #sidebar{ 
     float:right; 
     width:250px; 
    }

的基本思路这里是先设定一个范围的宽度，而不死价值的包装的。之后，决定哪一列将具有固定的宽度，哪一个将具有流体宽度。对于这种情况下的#main div的流体列，不要设置固定宽度;而是设置一个将其推到其位置的保证金。这样做会保持固定柱和流体柱之间固定的“填充”。在我的例子中，无论浏览器如何调整大小，这个“填充”都会保持在30px左右。固定的列将保持在250px，距离流体柱的“填充”为30px，并且流体柱将依次具有“可变”宽度，这取决于浏览器窗口大小。

希望这有助于;）

来源

2011-07-17 20:22:16 vynx

控制div的宽度

回答

相关问题