Question

好吧所以我一直试图将这4个div放置大约6个小时。路线框假设占用导航和信息div之间的任何高度，不太确定如何说。如果有人可以帮助我或指出我正确的方向，我会非常感激。

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

目前的代码是98.214.131.200/new.php＆amp; 98.214.131.200/defualt.css

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

Answer 2

<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;
}

Answer 3

假设您最初不知道高度，则需要通过获取Google地图的高度减去信息的高度然后将路线设置为该高度来以编程方式执行此操作。示例here。或者您可以使用表格： - （

Answer 4

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

Answer 5

设置height:350px;课.routes可能对您有所帮助 如下：

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

<强>的jsfiddle： http://jsfiddle.net/beABW/

Answer 6

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

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

Answer 7

使用flex-boxes可能就是你所追求的。 Flex-box可用于拉伸/生长div以填充其父级，同时考虑其父级的其他子级。我有example here做了我相信你的要求。

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

Answer 8

以下是表格解决方案的示例（不是非常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>

定位4个div

8 个答案: