定位4 divs

好吧，所以我一直试图将这4个div放置大约6个小时。路线框假设要占据导航栏和信息栏之间的任何高度，不知道该怎么说。如果有人能帮助我，或者指引我走向正确的方向，我会非常感激。定位4 divs

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

当前的代码是在98.214.131.200/new.php & 98.214.131.200/defualt.css

来源

2012-06-28 Tyler Siegrist

请表明您已经尝试的代码。如果你创建了描述问题的[jsfiddle]（http://jsfiddle.net/），它也会有帮助。 –

显示你的代码.......... –

@Kyomu ...请试试这个更新如上。 98.214.131.200/new.php – khurram

设置.routes类的height:350px;它可以帮助你
如下：

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

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

来源

2012-06-28 12:43:10 khurram

<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-28 12:20:00

<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-28 12:23:15 Exor

这对3格非常适用，但我还需要一个穿过顶部的酒吧，高度为35px –

@TylerSiegrist：在顶部添加一个div，并给出高度35px。正在编辑我的代码。请检查 – Exor

我发布后立即发现，代码正在工作。我不希望目前正在扩大规模的所有事情都这样做。绿色和蓝色的高度应填充窗口，但不能与黑色条形重叠。绿色和蓝色的宽度也应该只有300px，然后红色会留下任何宽度和高度。（见原帖的图片） –

假设你最初不知道高度，你需要通过编程方式来完成获得Google Map的高度减去信息的高度，然后将路线设置为该高度。示例here。或者你可以使用一个表:-(

来源

2012-06-28 12:25:31 septemberbrain

不要使用表格; p你会遇到更多的问题，而不是你会解决的 – Neddy

不理想，我同意但是没有使用javascript并且不知道高度。 – septemberbrain

.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-28 12:27:34

我编辑khurram的答案，关键是，浮一切，占用任何空间是左使用溢出：（！没有浮动）隐藏

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

来源

2012-06-28 13:07:27 Ruben

这仍然不会使路线和信息框填满窗口的高度 –

使用flex-boxes可能是你在之后。 Flex-boxes可以用来扩展/增长div来填充它的父项，同时考虑其父项的其他子项。我有一个example here它做我相信你的要求。

注：我不知道是什么浏览器版本这部作品在

来源

2012-06-28 15:20:54 Fewfre

下面是一个解表的例子（不是很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-28 15:21:55 WolvDev

回答

相关问题