0

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

  • 当0 <= screen width <= c左列宽为a
  • 当c <= screen width <= d左列宽度从[a,b]
  • 当d <= screen width左列宽 =b

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

4

2 回答 2

2

整个x <= screen width <= y事情听起来像@media (max-width: 1234px)或与我相似。所以我建议你使用媒体查询。

于 2013-04-04T17:50:01.207 回答
0

我无法解决 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>
于 2013-04-04T19:05:31.403 回答