1

左側に 1 つ、右側に 1 つの 2 つの列を表示するレイアウトを作成する方法を理解しようとしています。左の列の幅を指定するのはクールですが、余白とパディングがあるため、右の列の幅を指定してブラウザーに決定を委ねたくはありません。

これを行う例は見つかりません。人々は常にすべての列に固定幅を与えているようです。問題を再現するサンプル コードを次に示します。

<html>
 <head>
  <style type="text/css">
    #left, #right {
     border: solid 1px #000000;
    }

    #left {
     float: left;
     width: 10%;
    }

    #right {
     float: left;
    }
  </style>
 </head>
 <body>
  <div id="left">I'm left</div>
  <div id="right">
   <p>I'm right.</p>
   <p>There is a bit more text here.</p>
   <p>Let's assume for a moment, that there is so much text here,
   that it cannot possibly fit on one line on any kind of monitor.
   For this purpose, I have to write a bit of nonsense, but there is
   always enough nonsense for this kind of task in the world.
   I could always ask a politician, I'm sure there isn't even a single
   cinema canvas in the world that could display such nonsense in a
   single line.
  </div>
 </body>
</html>

特に長い段落を削除すると、右側の列が同じ行に収まるほど小さくなり、機能することに注意してください。

右側の列に残りのスペースを占有させる方法はありますか?

4

3 に答える 3

1

秘訣は、overflow：hiddenを右側のパネルに配置することです。

#left, #right {
       border: solid 1px #000000;
}

#left {
      float: left;
      width: 10%;
}

#right {
       overflow: hidden;
}
于 2010-07-20T18:17:16.180 に答える
0

これはあなたのためにそれを行います：

#left {
    position: absolute;
    left: 0;
    top: 0;
    width: 200px;
}

#right {
    padding-left: 200px;
}
于 2010-07-20T15:39:46.010 に答える
0

IEで開くと、すでに持っているものがニーズを満たすと思います。ただし、Firefox の場合、これら 2 つの div の display プロパティを table に設定します。この値は IE では未定義であることに注意してください。

#left, #right {
    border: solid 1px #000000;
    display: table;
}
于 2010-07-20T15:42:01.013 に答える