javascript - jqueryでページ要素の幅を設定する方法

Question

ページの左側にツールバーがあり、ツールバーの幅は 35px、メイン コンテンツ パネルはページの右側にあり、CSS がありますfloat:rightメイン コンテンツ パネルの幅を 100%-35px に設定したい、ツールバーを表示できるようにするには、どうすればこの効果を得ることができますか、どうもありがとう。

Answer 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

Answer 2

CSS で簡単に実現できそうです。

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