0

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

正如您从我所附图片中的箭头看到的那样，我正在尝试向上滑动这四个 div（谁在线、即将发生的事件、统计数据和天气）以填补空白。右侧的列具有可变高度，当它展开时，上述四个 div 会继续向下移动页面。他们需要留在白盒子下面。

绝对定位的问题在于，四个 div（Who's Online、Upcoming Events 等）也会有不同的高度，所以我不想将第二行放在绝对位置。

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 重新排列为 2 列而不是 4 个象限。您目前拥有：

<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 回答