css - 流体布局中的固定宽度块

Question

在流体布局中，我需要在同一行并排放置一个固定宽度的块和一个具有最大宽度的流体宽度块。调整窗口大小时，流体宽度块应调整大小，并由固定宽度块“推动”。

这是我要实现的目标： http: //cssdesk.com/gHvUB

但可悲的是，内容扩展到其容器之外......

任何人 ？

Answer 1

通过您提供的示例实现目标的一种方法是

1. 为流体框添加 200px 的右边距

2. 将 -200px 的相对位置添加到固定宽度框。

   .line {
      ...
      position: relative;
    }
   .fluid {
      ...
      margin-right: 200px;
    }
   .fixed-width {
      ...
      position: relative;
      top: 0;
      right: -200px;
    }
   

Answer 2

使用 css（尤其是 css3）将有许多不同的方法来实现这一点。

这里有几个例子：

例子

例子

在网站上：

CSS Layout 2-Column 固定流体

Answer 3

好的，最简单的方法是设置容器溢出：auto。然后将两个子容器设置为位置：绝对。由于容器的位置：相对，它们将位于父容器内。然后你需要将父级的高度设置为某个值。您可以尝试最小高度：（值）。我这里有一个样本。

希望这可以帮助。