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

あなたが貼り付けた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 に答える