Question

------------- --------------------------------------------------
| some text | | some more text, sometimes more, sometimes less |
------------- --------------------------------------------------

|<------------------------- 100% width ----------------------->|

所以我有上面的布局。左侧框应始终尽可能小，而右侧框应占用剩余空间。对于float: left，这通常没问题。

问题在于，正确的盒子可以增长很多，而左边的盒子几乎可以保证很小（ 但尺寸不一样，所以需要灵活 < /强>）。如果正确的方框增长，我需要它的行为如下：

------------- -------------------------------------------------- | some text | | quite a lot of text, actually, really quite a | ------------- | bunch of it, you could say this is really | | quite a heck of a lot of text | --------------------------------------------------

如果我使用float:left，如果右侧框包含大量文字，则右框会在左侧框下划线：

------------- | some text | (not good) ------------- ---------------------------------------------------------------- | quite a lot of text, actually, really quite a bunch of it, | | you could say this is really quite a heck of a lot of text | ----------------------------------------------------------------

如果我改为使用表格，如果两个文本都包含非常少的文本，则左框可能会不必要地增长：

(not good) -------------------------------- ------------------------------- | some text | | not that much text | -------------------------------- -------------------------------

此外，左框不应该换行。但由于它包含一些HTML元素，而不仅仅是纯文本，no-wrap似乎并不适用于所有浏览器。

这个问题的解决方案是什么？

修改

正确的方框占据剩余的宽度并不是非常重要，只是它始终保持连接到左侧框的右侧。

Answer 1

对于右侧框，请使用overflow: hidden; width: auto;而不是浮动。无论有多少内容，这应该占用剩余空间而不会下降。继续浮动左框。

Answer 2

为左列和float:left定义固定宽度;把它放在HTML

中的主列之后

右栏有两个div;外面的一个也向左漂浮，宽度为100％，内部有一个与左列宽度相同的左边距。

Answer 3

正如Stobor建议：尝试将左框放在右框内

<div id="rightBox">
   <div id="leftBox">This text will expand the left box</div>
   <div style="float:left">
      Content of right box goes here<br>
      Breaking even works...
   </div>
</div>

CSS：

#rightBox {
   width: 100%;
   background: red;
}
#leftBox {
   width: auto;
   float: left;
   background: blue;
}

适合我。

Answer 4

如果您正在使用纯css解决方案，我认为您将不得不为其中一列提供某种宽度约束。它绝对不是上面建议的百分比吗？

问题是2倍。如果浮动一列并给另一列宽度为100％，因为浮动列从文档流中移除，另一列的100％宽度是完整视口宽度（它忽略浮动div）。如果你在没有设置第二个div的宽度的情况下浮动它们，div将（应该）收缩到它最宽的子元素的宽度。 the w3c spec可能有一些帮助，虽然这不是最简单的阅读。

你总是可以尝试使用javascript来读取视口宽度，然后设置列宽，否则我认为你会挣扎。

Answer 5

您还可以尝试将包装器显示设置为table，将子元素设置为table-cell。然后，您可以将一个div的宽度和高度设置为固定像素值，将另一个（动态）div宽度设置为100％。

<style>
* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

#container{
  border: solid #222 1px;
  width: 400px;
  height: 360px;
  resize: both;
  overflow: auto;
}

#wrap{
  border: solid red 1px;
  width: 100%;
  height: 100%;
  display: table;
  resize: both;
  overflow: auto;
}

video{
  border: solid #222 4px;
  display: table-cell;
  width: 160px;
  height: 160px;
}

#list{
  border: solid #222 4px;
  display: table-cell;
  width: 100%;
  height: 100%;
}
</style>
<div id="container">
  <div id="wrap">
    <video controls></video>
    <br>
    <div id="list"></div>
  </div>
</div>

把那只小狗丢在那儿！

ps：不知道如何垂直地做这个:(

EDIT !!!

VERTICAL： * { -webkit-box-sizing：border-box; -moz-box-sizing：border-box; box-sizing：border-box; }

#container{
  border: solid #222 1px;
  width: 400px;
  height: 360px;
  resize: both;
  overflow: auto;
}

#wrap{
  border: solid red 1px;
  width: 100%;
  height: 100%;
  display: table;
  resize: both;
  overflow: auto;
}

video{
  border: solid #222 4px;
  display: table-cell;
  width: 160px;
  height: 160px;
}

#median{
  display: table-row;
  width: 100%;
}

#list{
  border: solid #222 4px;
  display: table-cell;
  width: 100%;
  height: 100%;
}
</style>
<div id="container">
  <div id="wrap">
    <video controls></video>
    <div id="median"></div>
    <div id="list"></div>
  </div>
</div>

CSS：两个字段，左边是一个柔性宽度，右边一个占据剩余空间

5 个答案: