如何在jquery中设置页面元素的宽度

时间:2013-10-08 07:18:26

标签: javascript jquery jsp

我的页面左侧有一个工具栏,工具栏的宽度为35px,主要内容面板位于我的页面右侧并且有CSS float:right我想设置宽度主要内容面板有100%-35px,这样可以显示工具栏,怎样才能达到这个效果,非常感谢。

4 个答案:

答案 0 :(得分:1)

您可以使用calc()。但我不确定浏览器兼容性。所以试试jquery解决方案。

布局应该是这样的。

<div style="width: 100%">
    <div id="toolbar" style="display: inline-block; width: 35px"></div>
    <div id="main-content" style="display: inline-block"></div>
<div>

在jquery中:

$("#main-content").width($(window).width() - 35); 

如果有填充或边距也检测到它们。

答案 1 :(得分:1)

使用absolute位置这样做很方便。它不需要使用javaScript,它可以正确处理屏幕大小更改事件。 像贝娄这样的CSS:

.toolbar {
    position: absolute;
    width: 35px;
}

.content { 
    position: absolute;
    left: 35px;
    right: 0px;
}

请参阅jsFiddle中的demo

答案 2 :(得分:1)

纯CSS基础方法:

的CSS:

.container {
  padding-left: 50px;
  border: 1px solid red;
}

.toolbar {
  width: 35px;
  margin-left: -50px;
  padding: 0 5px; 
  list-style-type: none;
}

.main {
  width: 100%;
}

.col {
  display: inline-block;
  vertical-align: top;
}

HTML:

<div class="container">
  <ul class="toolbar col">
    <li>Link1</li>
    <li>Link2</li>
    <li>Link3</li>
  </ul>
  <div class="main col">
    <p>This is the place holder for Main Content</p>
  </div>
</div>

http://cdpn.io/hlfFG

答案 3 :(得分:0)

使用CSS可以很容易地完成这个。

#main-content {
  width: 100%;
  margin-right: 35px;
}