У меня есть два вертикальных элемента, но переменная высота второго элемента приводит к неправильному расположению первого элемента. - PullRequest
Новая
       7

У меня есть два вертикальных элемента, но переменная высота второго элемента приводит к неправильному расположению первого элемента.

0 голосов
/ 04 мая 2011

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

Как видно из стрелок на прилагаемом рисунке, я пытаюсь сдвинуть эти четыре элемента (Кто онлайн, предстоящие события, статистика и погода) ВВЕРХ, чтобы заполнить пустоту. Столбец справа имеет переменную высоту, и когда он расширяется, эти четыре вышеупомянутых элемента продолжают двигаться вниз по странице. Им нужно оставаться под белой коробкой.

Проблема с абсолютным позиционированием заключается в том, что четыре div (Кто онлайн, Предстоящие события и т. Д.) Также будут иметь переменную высоту, поэтому я не хочу помещать второй ряд из них в абсолютную позицию.

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

1 Ответ

0 голосов
/ 04 мая 2011

Переставьте ваши 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>

Таким образом, мидбоксы естественно будут течь под фототикером. Вам нужно будет указать определенную ширину в правой и левой боковых ячейках, а затем просто переместить оба левых.

...