1

#sidebar次の問題があります: a が一定の 27px にまたがり、a#contentが画面の残りの部分にまたがるhtml ページを作成したいと思います。は#content2 つの領域に分割され、40% ～ 60% に分割されます。

<html>
  <body>
    <div id="sidebar">
    </div>
    <div id="content">
      <div id="forty-percent">
      </div>
      <div id="sixty-percent">
      </div>
    </div>
  </body>
</html>

次のcssを作成しようとしました：

#sidebar{
  width:27px;
}
#content{
  position:absolute;
  padding-left:27px;
  width:100%;
}

#contentしかし、パーセンテージは内部の領域ではなく幅から計算されるため、コンテンツを 40% から 60% に分割することはできません。

私は何を間違っていますか？助けていただけますか？

アップデート：

動作しないバージョンのデモ:

http://jsbin.com/iseqon/1/edit

理想的には、破線のボックスは青いボックスの内側に並べて配置する必要があります。

4

4 に答える 4

2

これは、あなたのニーズにより適しているかもしれません。#sidebar と #content の垂直方向の配置をより適切に制御したい場合は、インライン ブロックを使用して CSS のみのソリューションを用意する必要があります。

ここでライブで見ることができます: http://codepen.io/jpsirois/pen/dvbmEy

* {
  /* This prevent padding to be added on defined width */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; 
}

body {
  font-size: 0; /* Need to be set to 0 to properly use inline-block here */
  color: white; /* For a better preview purpose only */
}

#sidebar,
#content {
  display: inline-block; /* Allow vertical-align control (float didn’t) */
  font-size: 16px; /* Reset font-size to normal */
  vertical-align: middle; /* Demo of vertical-alignement */
}

#sidebar {
  width: 27px; 
  background: darkred;
  height: 50px; /* For a better preview purpose only */
  margin-right: -27px; /* This allow #content to be inlined aside */
}

#content {
  font-size: 0; /* Need to be set to 0 to properly use inline-block here */
  width: 100%;
  padding-left: 27px;
}

#forty-percent,
#sixty-percent {
  height: 100px;/* For a better preview purpose only */
  display: inline-block;
  font-size: 16px; /* Reset font-size to normal */
}

#forty-percent {
  width: 40%;
  background: darkgreen;
}

#sixty-percent {
  width: 60%;
  background: darkblue;
}
于 2013-05-02T13:42:57.950 に答える
2

これは、 をフロートさせ、 に等しい値を#sidebar与えるために必要です。また、2 つの内部ボックスをフロートして、並べて座れるようにする必要があります。margin-left#content

#sidebar {
    width:27px;
    float:left;
}
#content {
    margin-left:27px;
    overflow:auto;
}
#forty-percent {
    width:40%;
    float:left;
}
#sixty-percent {
    width:60%;
    float:left;
}

また、実際には#文字を使用しないでくださいid

http://jsfiddle.net/gaby/8a7CN/のデモ

( http://jsbin.com/iseqon/4/editの固定 jsbin デモでは、境界線が幅に追加されるため、パーセンテージではうまく機能しないことに注意する必要があります)

于 2013-05-02T13:33:13.093 に答える
-2 
I am using your HTML only change the CSS.
My CSS is

#sidebar
{
width:27px;
min-width:27px;
float:left;
}

#content
{
float:right;
width:100%-28px;
min-width:100%-28px;
}

#forty-percent
{
width:40%;
float:left;
}
#sixty-percent
{
width:60%;
float:right;
}

Hope this will help you.Thanks.
于 2013-05-02T13:21:38.783 に答える