流体布局中的固定宽度块答案

【问题标题】：A fixed width block in a fluid layout流体布局中的固定宽度块
【发布时间】：2012-04-14 11:49:56
【问题描述】：

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

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

但遗憾的是，内容会扩展到其容器之外.....

有人吗？

【问题讨论】：

标签： css responsive-design

【解决方案1】：

使用您提供的示例实现目标的一种方法是

为流体框添加 200 像素的右边距

给定宽框添加一个-200px的相对位置。

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

【讨论】：

【解决方案2】：

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

这里有几个例子：

example

在网站上：

CSS Layout 2-Column fixed-fluid

【讨论】：

【解决方案3】：

好的，最简单的方法是将容器设置为溢出：auto。然后将两个子容器设置为位置：绝对。由于容器的位置：相对，它们将位于父容器内。然后你需要将父级的高度设置为某个值。您可以尝试最小高度：（值）。 I have a sample here.

希望这会有所帮助。

【讨论】：