CSS 设置宽度以填充剩余面积的%

对于这个有点垃圾的标题，我感到很抱歉。我不知道怎样才能更好地描述这个标题。

我试图在我的网站上实现谷歌朋友连接成员小工具，(刚刚进入这个方案，想把它放在没有一个重大的重新设计，至少为了测试的缘故)。

我的问题是:

我有一个容器 div，其宽度为主页(主体)的90% 。在这里面，我向右浮动一个 div，并将其宽度设置为300px，然后将谷歌小工具放入其中。我想要的是能够有一个 div 填充剩余的空间的95% 左边的谷歌小工具 div。

我不知道是否可以将 px 和% 与 div 和宽度混合。

我希望这能说得通。

谢谢

76724 次浏览

小开

最佳答案

It is. You're looking for a semi-fluid layout. The quest was was originally the holy grail of CSS implementation... But as you can see from that link (they're doing 3 columns, 2 fixed but it's easy to alter), it's a problem long solved =)

小开

I did a quick experiment as well after looking at a number of potential solutions all over the place. What I was trying to do was to have a mix of fluid and fixed rows and columns.

This is what I ended up with:

http://jsbin.com/hapelawake

小开

If you prefer to avoid floats and clearfixes, use flex layout.

.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>

Note: Add flex vendor prefixes if required by your supported browsers.