Question

我正在试图弄清楚如何创建一个显示两列的布局，一个在左边，一个在右边。我很酷，指定左列的宽度，但由于边距和填充，我真的不想指定右列的宽度，并将其留给浏览器来决定。

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

<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>

请注意，如果我删除特别长的段落，右栏会足够小以适合同一行，它会起作用。

有没有办法让正确的列占用剩余的空间？

Answer 1

诀窍是将 overflow：hidden 放入右侧面板：

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

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

#right {
       overflow: hidden;
}

Answer 2

这可以帮到你：

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

#right {
    padding-left: 200px;
}

Answer 3

如果你在IE中打开它，我相信你已经拥有的东西满足了你的需求。但是，对于Firefox，将这两个div的显示属性设置为表。请注意，此值在IE中未定义。

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

双列CSS布局，无需指定正确的列

3 个答案: