Question

我在左侧放置了3个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-->

Answer 1

将您的PlayersOnline置于绝对位置，并为#boxes提供相对位置。然后将right: 5px;放在PlayersOnline div上，这就是你得到的内容。

http://jsfiddle.net/24LtW/

另请注意，您不应该为NewsPageContent提供ID，而应为class属性。

Answer 2

我修复了你粘贴的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应该永远不会“叠加”。

我也将你的'id'更改为'class'，如果需要，请指出@Fabrizio

并排划分

2 个答案: