CSS设置宽度来填充剩余区域的百分比

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

我正在尝试在我的网站上实现Google朋友群成员小工具，（刚进入scheme并希望在没有重大devise的情况下进行，至less是为了testing）。

我的问题如下：

我有一个容器div有90％的主页（身体）的宽度。 在里面，我浮动右边的一个div，并将其宽度设置为300px，并将其中的谷歌小工具。 我想要的是能够有一个div填充剩余的空间的谷歌小工具div的左侧的95％。

我不知道是否有可能混合px和％与div和宽度。

我希望这是有道理的。

谢谢

Answer 1

它是。 你正在寻找一个半stream体布局。 这个任务本来就是CSS实现的圣杯 ……但是从这个链接中可以看出（他们正在做3列，2个固定但很容易改变），这是一个长久以来解决的问题=）

Answer 2

我在做了一个快速的实验，并在遍布全球的一些潜在的解决scheme。 我试图做的是混合stream体和固定的行和列。

这是我结束了：

http://jsbin.com/hapelawake

Answer 3

Flexbox解决scheme

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

 <div class="main"> <div class="col1" style="background: #eee;">Left column</div> <div class="col2" style="background: #ccc;">Right column</div> </div> 

Answer 4

您需要使用jQuery或JS创build一个algorithm，该algorithm会检查剩余空间，并根据响应构builddynamic设置“remaining”元素的宽度。 如果构build不响应，则可以通过执行简单的math计算来testing和设置元素宽度。

我们遇到了类似的问题，同时build立了一个基于液体响应的网格的媒体系统。