2

好的，所以我一直在尝试定位这 4 个 div 大约 6 个小时。路线框应该占据导航和信息 div 之间的任何高度，不太确定怎么说。如果有人可以帮助我或指出我正确的方向，我将不胜感激。

http://i.stack.imgur.com/41q3H.png

当前代码位于 98.214.131.200/new.php & 98.214.131.200/defualt.css

4

8 回答 8

1 
<div>
     <div style="background-Color:black;height:35px"></div>   
     <div style="width:30%;float:left;height:500px">
            <div style="height:50%;background-color:green;width:100%"></div>
            <div style="height:50%;background-color:blue;width:100%"></div>
     </div>
     <div  style="width:70%;float:right;height:500px;background-color:red"></div>
</div>
于 2012-06-28T12:23:15.587 回答
0

假设您最初不知道高度，您需要以编程方式执行此操作，方法是获取 Google Map 的高度减去 info 的高度，然后将路线设置为该高度。这里的例子。或者你可以使用一张桌子:-(

于 2012-06-28T12:25:31.780 回答
0 
.class1
{
    float:left;
 }


#one
{
    height:35px;
    width:100%;
    border:1px solid red;
    }

    #two
{
    height:200px;
    width:300px;
     border:1px solid red;
    }

#three {
    border: 1px solid Green;
    height: 403px;
}

    #four
{
    height:200px;
    width:300px;
     border:1px solid red;
    }

   #lftpanel {
    float: left;
    width: 300px;
}
 #rgtpanel {
    float: left;
    width: 808px;
}

<div id="mainDIv">
    <div id="one" class="class1">
    </div> 
    <div id="lftpanel">

        <div id="two" class="class1">
        </div>
    <div id="four" class="class1">
    </div> 
    </div> 
    <div id="rgtpanel">

    <div id="three" class="class1">
    </div> 
       </div>
 </div>
于 2012-06-28T12:27:34.803 回答
0

使用flex-boxes可能是你所追求的。Flex-boxes 可用于拉伸/增长 div 以填充其父级，同时考虑其父级的其他子级。我在这里有一个例子，我相信你的要求。

注意：我不确定这适用于哪些浏览器版本。

于 2012-06-28T15:20:54.660 回答
0

这是一个表格解决方案的示例（不是非常 W3C，但该解决方案也适用于旧版浏览器）：

<table width="100%" cellpadding="0" cellspacing="0" border="1">
    <tr>
        <td colspan="2">Header
        </td>
    </tr>
    <tr>
        <td width="300px">
            <table width="100%" height="100%" cellpadding="0" cellspacing="0" border="1">
                <tr>
                    <td width="100%">topleft</td>
                </tr>
                <tr>
                    <td width="100%" height="200px">bottomleft</td>
                </tr>
            </table>
        </td>
        <td height="1000px">right</td>
    </tr>
</table>

我以前试过这个，但不起作用：

<table width="100%" cellpadding="0" cellspacing="0" border="1">
    <tr>
        <td colspan="2">Header
        </td>
    </tr>
    <tr>
        <td width="300px">topleft</td>
        <td rowspan="2">right</td>
    </tr>
    <tr>
        <td width="300px" height="200px">bottomleft</td>
    </tr>
</table>
于 2012-06-28T15:21:55.307 回答
0

我编辑了 khurram 的答案，诀窍是浮动所有内容并占用剩余空间使用溢出：隐藏（没有浮动！）

编辑：http: //jsfiddle.net/hashie5/v4jFr/

于 2012-06-28T13:07:27.593 回答
0 
<div class="navigation"></div>

<div class="content">
   <div class="firstCol">
     <div class="routes"></div>
     <div class="info"></div>
   </div>
   <div class="secondCol">
     <div class="google_map"></div>
   </div>
</div>

在你的 style.css

    .navigation{
       height:35px;
        width:100%;
    }

    .content{
        width:100%;
    }

    .firstCol{
       float:left;
       width:300px;
    height:auto;
    }

    .routes{
    width:300px
    height:auto;
    }


    .info{
    width:300px
    height:200px;
    }

    .secondCol{
       float:left;
       width:auto;
    height:auto;
    }

.google_map{
width:auto;
height:auto;
}
于 2012-06-28T12:20:00.937 回答
0

设置height:350px;类.routes它可能会帮助你。
如下：

.routes {
    background: none repeat scroll 0 0 #0000FF;
    height: 350px;
    width: 300px;
}

JSFIDDLE：http: //jsfiddle.net/beABW/

于 2012-06-28T12:43:10.293 回答