0

http://denartcc.org/images/help.jpg

添付の写真の矢印からわかるように、4 つの div (誰がオンラインか、今後のイベント、統計、天気) を上にスライドさせて空白を埋めようとしています。右側の列の高さは可変で、展開すると、前述の 4 つの div がページの下に移動し続けます。彼らは白い箱の下にとどまる必要があります。

絶対配置の問題は、4 つの div (誰がオンラインか、今後のイベントなど) の高さも可変であるため、それらの 2 行目を絶対位置に貼り付けたくありません。

HTML

<div id="TopContentWrapper">
    <div id="phototicker">
    <jdoc:include type="modules" name="phototicker" />
    </div>
    <div class="RightSide">
        <div class="rtsidemod">
            <div class="rtsidetitle">Control Panel</div>
            <div class="rtsidecontent"><jdoc:include type="modules" name="controlpanel" /></div>
        </div>
        <div class="rtsidemod">
            <div class="rtsidetitle">Newletter</div>
            <div class="rtsidecontent"><jdoc:include type="modules" name="newsletter" /></div>
        </div>
        <div class="rtsidemod">
            <div class="rtsidetitle">Event Notifications</div>
            <div class="rtsidecontent"><jdoc:include type="modules" name="eventnotifications" />Check Check</div>
        </div>
        <div class="rtsidead">
            <img src="http://denartcc.org/dev/templates/NexGenDEN/images/ads/forum.png"></img>
        </div>
        <div class="rtsidead">
            <img src="http://denartcc.org/dev/templates/NexGenDEN/images/ads/ts.png"></img>
        </div>
        <div class="rtsidead">
            <img src="http://denartcc.org/dev/templates/NexGenDEN/images/ads/ts.png"></img>
        </div>
    </div>
    <div class="midbox1">
        <div class="modbox">
            <div class="modtitle">Who's Online
            </div>
            <div class="mid1">
                <p class="mid"><jdoc:include type="modules" name="whosonline" /></p>
            </div>
        </div>
        <div class="modbox">
            <div class="modtitle">Upcoming Events
            </div>
            <div class="mid2">
                <p class="mid"><jdoc:include type="modules" name="upcomingevents" /></p>
            </div>
        </div>
    </div>
    <div class="midbox2">
        <div class="modbox">
            <div class="modtitle">Statistics
            </div>
            <div class="mid1">
                <p class="mid"><jdoc:include type="modules" name="statistics" /></p>
            </div>
        </div>
        <div class="modbox">
            <div class="modtitle">Weather
            </div>
            <div class="mid2">
                <p class="mid"><jdoc:include type="modules" name="weather" /></p>
            </div>
        </div>
    </div>
</div>

CSS

#TopContentWrapper {
width:920px;
margin:0 auto;
position:relative;
}
div.RightSide {
width:255px;
float:left;
margin-left:5px;
}

div.rtsidemod {
float:left;
width:100%;
padding-bottom:5px;
background-image:url(../images/rightbg.png);
background-repeat:repeat-y repeat-x;
}

div.rtsidetitle{
font-weight:bold;
color:white;
font-size:12px;
background-image:url(../images/rttitlebg.png);
background-position:top left;
height:15px;
}

div.rtsidetitle:hover {
background-position:bottom left;
}

div.rtsidecontent {
font-size:11px;
color:white;
}

div.rtsidead {
width:255px;
float:left;
margin:5px 0 0 0px;
border:1px solid black;
}

div.modtitle {
width:322px;
height:15px;
font-size:12px;
color:white;
font-weight:bold;
background:url(../images/midmodbg.jpg);
background-repeat:repeat-x;
}

div.mid1 {
display:block;
float:left;
background-image:url(../images/midmodcontentbg.png);
background-repeat:repeat-both;
width:320px;
border:1px solid black;
border-top:none;
height:70px
}

div.mid2 {
display:block;
float:left;
background-image:url(../images/midmodcontentbg.png);
background-repeat:repeat-both;
width:320px;
border:1px solid black;
border-top:none;
height:70px
}

div.modbox {
float:left;
width:310px;
margin-right:19px;
margin-top:5px;
}

div.midbox1 {
float:left;
width:660px;
margin:0px 0 0px 5px;
padding:0;
}

div.midbox2 {
float:left;
width:700px;
margin:0px 0 0px 5px;
padding:0;
}
4

1 に答える 1

0

div を再配置して、4 つの象限ではなく 2 列にします。あなたは現在持っています:

<div id="phototicker">
    ...
</div>
<div class="RightSide">
    ...
</div>
<div class="midbox1">
    ...
</div>
<div class="midbox2">
    ...
</div>

代わりに、次のように配置します。

<div class="LeftSide">
    <div id="phototicker">
        ...
    </div>
    <div class="midbox1">
        ...
    </div>
    <div class="midbox2">
        ...
    </div>
</div>
<div class="RightSide">
    ...
</div>

そうすれば、ミッドボックスはフォトティッカーの下に自然に流れます。右側と左側の div に特定の幅を持たせ、両方を左にフロートさせる必要があります。

于 2011-05-04T00:38:47.677 に答える