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

私はkhurramの答えを編集しました。秘訣は、すべてをフロートさせ、残っているスペースをすべて占有するには、overflow：hidden（フロートなし！）を使用することです。

編集： http： //jsfiddle.net/hashie5/v4jFr/

于 2012-06-28T13:07:27.593 に答える
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 
<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

最初に高さがわからないと仮定すると、Googleマップの高さから情報の高さを引いたものを取得し、その高さにルートを設定することで、プログラムでこれを行う必要があります。ここの例。または、テーブルを使用できます:-(

于 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

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 に答える
0

フレックスボックスを使用することはあなたが求めているものかもしれません。フレックスボックスを使用して、divを拡大/拡大し、その親の他の子を考慮しながら、その親を埋めることができます。ここに、あなたが求めていると私が信じていることを実行している例があります。

注：これがどのブラウザバージョンで機能するかはわかりません。

于 2012-06-28T15:20:54.660 に答える