1

我试图弄清楚如何创建一个显示两列的布局，一列在左侧，一列在右侧。我很喜欢指定左列的宽度，但由于边距和填充，我真的不想指定右列的宽度，而是让浏览器来决定。

我找不到任何这样做的例子，人们似乎总是给所有列一个固定的宽度。这是一些重现该问题的示例代码：

<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

诀窍是将溢出：隐藏到右侧面板中：

#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，将这两个 div 的 display 属性设置为 table。请注意，该值在 IE 中未定义。

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