Question

对于略带垃圾的标题感到抱歉。我想不出如何更好地描述这个。

我正在尝试在我的网站上实施Google Friend Connect会员小工具（刚刚参与该计划，并希望在没有重大重新设计的情况下将其投入使用，至少为了测试）。

我的问题如下：

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

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

我希望这是有道理的。

由于

Answer 1

是的。您正在寻找半流体布局。任务最初是holy grail of CSS implementation ...但是你可以从那个链接看到它们（它们正在做3列，2个固定，但很容易改变），这是一个长期解决的问题=）

Answer 2

在看了很多可能的解决方案之后，我做了一个快速的实验。我试图做的是混合流体和固定的行和列。

这就是我最终的结果：

http://jsbin.com/hapelawake

Answer 3

如果您希望避免浮动和清除修正，请使用flex布局。

＆＃13;

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

＆＃13;

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

＆＃13;

注意：如果supported browsers需要，请添加Flex供应商前缀。

Answer 4

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

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

CSS设置宽度以填充剩余区域的％

4 个答案: