Div並排

我有一些問題，通過在左邊放置3個div ...和右邊的1個... 它的作品完美，如果每邊只有1格...Div並排

我有一個新聞欄目...爲每個新聞都創建一個新的div。

我會得到這些每頁5 ...（超過1 ...右邊...那麼div會被推下來....）

所有代碼：

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

來源

2013-04-29 Stian Tofte

內部有一個「類」的'foreach'要創建若干的div一樣'id'。用'class'代替 – fcalderan 2013-04-29 11:16:01

你在foreach循環中用id創建div。這會給你驗證錯誤... – 2013-04-29 11:16:41

嗨，Stian，也許因爲這是一個HTML問題，它可能會幫助你，如果你複製它在你的瀏覽器中產生的HTML，並告訴我們，而不是向我們顯示創建html的邏輯，因爲我們沒有其他的邏輯來看看它產生了什麼。 – Nnoel 2013-04-29 11:17:43

將您的PlayersOnline絕對位置與您的#boxes給出相對位置。然後把right: 5px;在你的PlayersOnline股利，這就是你得到的。

http://jsfiddle.net/24LtW/

另外請注意，你不應該給NewsPageContent一個id，但class屬性。

來源

2013-04-29 11:21:28

嗯，這是有效的...但是然後球員在線框不會調整頁面...當我獲得比「NewsPageContent」更長的時間... – 2013-04-29 11:29:58

你的PlayersOnline總是一樣的高度？如果是這樣，你可以設置盒子div的高度屬性。如果沒有，你可以用div來包裝你的新聞箱，並且把它留下，並且保持原來的樣子。 – 2013-04-29 11:32:38

我定你粘貼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

來源

2013-04-29 13:00:54 Nnoel

http://jsfiddle.net/Ninjanoel/kuh6r/1/ - 將'#boxes'的寬度設置爲950px（固定寬度），所以箱子對齊，如你所願 – Nnoel 2013-04-29 13:24:54

回答

相關問題