0

通过在左侧放置 3 个 div 和在右侧放置 1 个 div，我遇到了一些问题……如果每侧只有 1 个 div，它就完美了……

我有一个新闻部分......它为每个新闻创建一个新的 div。

每页我会得到5个......（超过1个......右侧的div......将被推下......）

<?php foreach ($news as $news_item): ?>
<div id="NewsPageContent">
THIS STUFF
</div><!--End NewsPageContent-->
<?php endforeach ?>

所有代码：

<div id="boxes">
<?php foreach ($news as $news_item): ?>
<div id="NewsPageContent">
THIS STUFF
</div><!--End NewsPageContent-->
<?php endforeach ?>

<div id="PlayersOnline">
<h2>Players Online</h2><hr />
<div id="heads">
This is the div to the right
</div><!--End heads-->
</div><!--End PlayerOnline-->
<div id="clear"></div>
</div><!--End boxes-->

CSS：

#boxes{
   width: 100%;
   overflow: hidden;
   clear:both;
   margin-top: 10px;
}

#NewsPageContent {
    margin-top:10px;
    float:left;
    width: 63%;
    background: #fefefe;
    border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    min-height: 100px;
    color: #7c7c7c;
    font-family: Helvetica, Arial, Verdana, sans-serif;
    font-size: 15px;
    padding-top: 1px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    border: 1px solid #a7a6a6; 
}

#PlayersOnline{
    float:right;
    width: 32%;
    background: #fefefe;
    border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    min-height: 350px;
    color: #7c7c7c;
    font-family: Helvetica, Arial, Verdana, sans-serif;
    font-size: 15px;
    padding-top: 1px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    border: 1px solid #a7a6a6;
}

编辑：我的浏览器中的 HTML：

<div id="boxes">
<div class="NewsPageContent">
                       <div id="news_title">
            <h3>HomieCraft</h3><hr />
            <div id="newsbuttons" style="float: right; font-weight: normal;"><a href="http://10.0.0.88/news/article/15">Read</a> | <a href="#">Comment(6)</a></div>
                <p style="font-weight: normal; font-size: 9px; margin-top: 1px; margin-bottom: 0px;margin-left: 2px; padding-bottom: 2px;">Published 26-04-2013 23:39 by GudfareN </p>
            </div>
            <div style="padding-bottom: 6px;" id="news_text">
               <p> HomieCraft awwwwyeeeee</p>
            </div>
            </div><!--End NewsPageContent-->
<div class="NewsPageContent">
                       <div id="news_title">
            <h3>HomieCraft</h3><hr />
            <div id="newsbuttons" style="float: right; font-weight: normal;"><a href="http://10.0.0.88/news/article/14">Read</a> | <a href="#">Comment(6)</a></div>
                <p style="font-weight: normal; font-size: 9px; margin-top: 1px; margin-bottom: 0px;margin-left: 2px; padding-bottom: 2px;">Published 26-04-2013 23:39 by GudfareN </p>
            </div>
            <div style="padding-bottom: 6px;" id="news_text">
               <p> HomieCraft awwwwyeeeee</p>
            </div>
            </div><!--End NewsPageContent-->
<div class="NewsPageContent">
                       <div id="news_title">
            <h3>HomieCraft</h3><hr />
            <div id="newsbuttons" style="float: right; font-weight: normal;"><a href="http://10.0.0.88/news/article/13">Read</a> | <a href="#">Comment(6)</a></div>
                <p style="font-weight: normal; font-size: 9px; margin-top: 1px; margin-bottom: 0px;margin-left: 2px; padding-bottom: 2px;">Published 26-04-2013 23:39 by GudfareN </p>
            </div>
            <div style="padding-bottom: 6px;" id="news_text">
               <p> HomieCraft awwwwyeeeee</p>
            </div>
            </div><!--End NewsPageContent-->
<div class="NewsPageContent">
                       <div id="news_title">
            <h3>HomieCraft</h3><hr />
            <div id="newsbuttons" style="float: right; font-weight: normal;"><a href="http://10.0.0.88/news/article/12">Read</a> | <a href="#">Comment(6)</a></div>
                <p style="font-weight: normal; font-size: 9px; margin-top: 1px; margin-bottom: 0px;margin-left: 2px; padding-bottom: 2px;">Published 26-04-2013 23:39 by GudfareN </p>
            </div>
            <div style="padding-bottom: 6px;" id="news_text">
               <p> HomieCraft awwwwyeeeee</p>
            </div>
            </div><!--End NewsPageContent-->
<div class="NewsPageContent">
                       <div id="news_title">
            <h3>HomieCraft</h3><hr />
            <div id="newsbuttons" style="float: right; font-weight: normal;"><a href="http://10.0.0.88/news/article/11">Read</a> | <a href="#">Comment(6)</a></div>
                <p style="font-weight: normal; font-size: 9px; margin-top: 1px; margin-bottom: 0px;margin-left: 2px; padding-bottom: 2px;">Published 26-04-2013 23:39 by GudfareN </p>
            </div>
            <div style="padding-bottom: 6px;" id="news_text">
               <p> HomieCraft awwwwyeeeee</p>
            </div>
            </div><!--End NewsPageContent-->
<div id="PlayersOnline" style="margin-top: 10px;">
<h2>Players Online</h2><hr />
<div id="heads">
</div><!--End heads-->
</div><!--End PlayerOnline-->
<div id="clear"></div>
</div><!--End boxes-->
4

2 回答 2

0

定位您的PlayersOnline绝对位置并为您的#boxes. 然后穿上right: 5px;你的PlayersOnlinediv，这就是你得到的。

http://jsfiddle.net/24LtW/

另请注意，您不应该给出NewsPageContent一个 id，而是一个class属性。

于 2013-04-29T11:21:28.863 回答
0

我已经修复了您粘贴的 html，生成了我认为您想要的内容...

这个jsFiddle的代码

.NewsPageContent /*now a class not id as suggested in comments*/

和...

<div id="PlayersOnline"> is placed above <div class="NewsPageContent">

基本上，我将您的“向右浮动”框移到了 html 的顶部，在“向左浮动”框上方。如果屏幕宽度太短，这些框将彼此错位，但如果您将所有 html 放入一个固定宽度的 div 中，即您的预期设计的宽度，则 div 永远不应该“堆叠”自己。

正如@Fabrizio 所指出的，我还根据需要将您的“id”更改为“类”

于 2013-04-29T13:00:54.057 回答