CSS设置宽度以填充剩余面积的百分比

82

对不起，标题有点垃圾。我想不出如何更好地描述这一点。

我正在尝试在我的网站上实施Google Friend Connect成员小工具（只是进入该计划，并希望在不进行重大重新设计的情况下就将其放入，至少出于测试目的）。

我的问题如下：

我有一个容器div，其宽度为主页（正文）的90％。在此内部，我将div浮动到右侧，并将其宽度设置为300px，然后将google小工具放入其中。我想要的是让div填充Google小工具div左侧剩余空间的95％。

我不知道是否可以将px和％与div和widths混合。

我希望这是有道理的。

谢谢

css

— 乔恩
source

相关stackoverflow.com/questions/4873832/...

— 阿德里安成为

70

它是。您正在寻找一种半流体布局。这个任务原本是CSS实现的圣杯...但是从该链接可以看到（它们正在做3列，固定了2列，但是很容易更改），这是一个长期解决的问题=）

— 奥利
source

看起来很完美。谢谢。周末我将对此进行摆弄。

— 乔恩

44

像这样的文章再次证实了我的担心，即CSS远远不是一个好的布局工具。

— s4y 2011年

11

@Sidnicious作为从事此工作（将设计转换为网站）的人，我可以告诉你，这比以前或之后建议的要好得多。它不是完美的，您需要知道它的工作原理。但是一旦完成，它就很简单。

— 奥利

但是如果要更改列的宽度，则必须在整个位置上编辑值。有一个令人讨厌的想法，即“如果可行，请不惜一切代价，请不要批评它”，但是布局可能要容易得多。如果只混合％和px并引用其他值，则一切都会简单得多。

— 乔纳森。

1

@乔纳森毫无疑问，这是真的-CSS中的活动变量和关节将使事情变得非常容易，但是我们没有。如果要破坏可塑性，请查看LESS / SASS / etc。他们只是解决方案的一半。

— 奥利（Oli）

0

在查看了各地的许多潜在解决方案之后，我也进行了快速实验。我试图做的是混合使用固定的行和列。

我最终得到的是：

http://jsbin.com/hapelawake

— 安东尼·坦布林
source

0

如果您希望避免使用浮点数和clearfix，请使用弹性布局。

.main {
  display: flex;
  width: 90%;
}
.col1 {
  flex-grow: 1;
}
.col2 {
  width: 300px;
  margin-left: 5%;
}

<div class="main">
  <div class="col1" style="background: #518cf3;">Left column</div>
  <div class="col2" style="background: #94d0bb;">Right column</div>
</div>

展开摘要

注意：如果支持的浏览器需要，请添加flex供应商前缀。

— 雷吉·平卡姆（Reggie Pinkham）
source

-1

您需要使用jQuery或JS创建一个算法，该算法根据响应构建检查剩余空间并动态设置“ remainder”元素的宽度。如果构建没有响应，则可以通过执行简单的数学计算来测试和设置元素宽度。

在构建基于液体响应网格的媒体系统时，我们遇到了类似的问题。

— 基础互动
source