CSS：如何创建两列半液体布局？答案

【问题标题】：CSS: How to create two column semi-liquid layout?CSS：如何创建两列半液体布局？
【发布时间】：2013-03-26 22:10:10
【问题描述】：

我想创建一个两列布局，其中左列的宽度取决于屏幕宽度，如下所示：

当0 <= screen width <= c左列宽为a
当c <= screen width <= d左列宽度从[a,b]线性变化时
当d <= screen width左列宽=b

并且右栏占据了剩下的任何空间。我怎么能用css做到这一点？此布局将用于地图应用程序，其中左列显示搜索结果，右列显示地图。

【问题讨论】：

@Lowkase，我希望我会为这样的问题获得金徽章，不是吗？ ;-)

标签： css

【解决方案1】：

整个x <= screen width <= y 听起来像@media (max-width: 1234px) 或类似于我的东西。所以我建议你使用media queries。

【讨论】：

【解决方案2】：

我无法解决 OP，但可能对 a=b=c=d 的情况有解决方案。如果我找到更好的解决方案会更新。

HTML：

<div id="main">         
    <div id="serp"></div>                
    <div id="mapDiv"></div>
</div>

CSS：

#main
{
    width:100%;
}

#serp
{
    float:left;
    width:210px;        
    height:600px;
    border:1px solid black; 
}

#mapDiv
{
    margin-left:220px;
    position:relative;
    height:600px;
    border:1px solid black;
}

需要position:relative，因为当地图控件作为#mapDiv 的子元素添加时，它具有position:absolute;left=0px;top=0px;right=0px 的内联样式

完整示例：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-eqiv="X-UA-Compatible" content="IE=edge" />
    <style type="text/css"> 
        #main
{
    width:100%;
}

#serp
{
    float:left;
    width:210px;        
    height:600px;
    border:1px solid black; 
}

#mapDiv
{
    margin-left:220px;
    position:relative;
    height:600px;
    border:1px solid black;
}
    </style>
</head>
<body>
    <div id="main">
        <div id="serp"></div>
        <div id="mapDiv"></div>
    </div>
    <script charset="UTF-8" type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0">
    </script>   
    <script charset="UTF-8" type="text/javascript">
        document.body.onload = (function()
        {
            var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), {credentials:"Your Bing Maps Key"});
        })();
    </script>
</body>
</html>

【讨论】：