CSS Floating/Wrapping問題

Question

我不知道如何正確解釋這一點，但我試圖得到一個元素列表來環繞一個塊。

這裏是我的意思圖片：

的代碼如下。如果只有2個塊，它會正確地向左浮動，但是當我添加更多時，它會下降到歡迎塊的下面（如圖中所示）。

設計在歡迎框旁邊顯示2個塊，然後在下面3個塊。所以在圖片中，第三塊應該坐在歡迎塊下面，隨後的塊將繼續正常（每行3塊）。

CSS

#welcome-block { 
float: left; 
width: 300px; 
background: #fff; 
} 

#bingo-offers { 
float: left; 
margin: 0; 
padding: 0; 
overflow: hidden; 
} 
    .bingo-offer { 
    float: left; 
    width: 300px; 
    background: #fff; 
    margin: 5px; 
    } 
     .bingo-offer ul { 
     margin: 0; 
     padding: 0; 
     } 

HTML

<div> 
     <div id="welcome-block"> 
      <h2>Welcome to Zesty Bingo</h2> 
      <p>Zesty Bingo is the home of FREE Bingo!</p> 
      <p>We have a huge selection of Bingo games to choose. Simple find a game, and click play. It’s as simple 
      as that.</p> 

      <p>Ensure you click the read more link on each game to find out more details and customer reviews on all 
      of our hosted games.</p> 

      <p>Good Luck and we wish you wealth and happiness from all the Zesty Bingo team.</p> 
     </div> 

     <ul id="bingo-offers"> 
      <li class="bingo-offer"> 
       <ul> 
        <li><img src="../img/winkbingo-146.png" alt=""></li> 
        <li><h3>Wink Bingo</h3></li> 
        <li>Free Cash: <span>£20</span></li> 
        <li>Join one of the biggest Bingo sites on the Internet and enjoy a whopping £20 bonus when you deposit £5!</li> 
        <li><a href="#">Play Now</a></li> 
        <li><a href="#">read more</a></li> 
       </ul> 
      </li> 

      <li class="bingo-offer"> 
       <ul> 
        <li><img src="../img/winkbingo-146.png" alt=""></li> 
        <li><h3>Wink Bingo</h3></li> 
        <li>Free Cash: <span>£20</span></li> 
        <li>Join one of the biggest Bingo sites on the Internet and enjoy a whopping £20 bonus when you deposit £5!</li> 
        <li><a href="#">Play Now</a></li> 
        <li><a href="#">read more</a></li> 
       </ul> 
      </li> 

      <li class="bingo-offer"> 
       <ul> 
        <li><img src="../img/winkbingo-146.png" alt=""></li> 
        <li><h3>Wink Bingo</h3></li> 
        <li>Free Cash: <span>£20</span></li> 
        <li>Join one of the biggest Bingo sites on the Internet and enjoy a whopping £20 bonus when you deposit £5!</li> 
        <li><a href="#">Play Now</a></li> 
        <li><a href="#">read more</a></li> 
       </ul> 
      </li> 

      <li class="bingo-offer"> 
       <ul> 
        <li><img src="../img/winkbingo-146.png" alt=""></li> 
        <li><h3>Wink Bingo</h3></li> 
        <li>Free Cash: <span>£20</span></li> 
        <li>Join one of the biggest Bingo sites on the Internet and enjoy a whopping £20 bonus when you deposit £5!</li> 
        <li><a href="#">Play Now</a></li> 
        <li><a href="#">read more</a></li> 
       </ul> 
      </li> 

      <li class="bingo-offer"> 
       <ul> 
        <li><img src="../img/winkbingo-146.png" alt=""></li> 
        <li><h3>Wink Bingo</h3></li> 
        <li>Free Cash: <span>£20</span></li> 
        <li>Join one of the biggest Bingo sites on the Internet and enjoy a whopping £20 bonus when you deposit £5!</li> 
        <li><a href="#">Play Now</a></li> 
        <li><a href="#">read more</a></li> 
       </ul> 
      </li> 

      <li class="bingo-offer"> 
       <ul> 
        <li><img src="../img/winkbingo-146.png" alt=""></li> 
        <li><h3>Wink Bingo</h3></li> 
        <li>Free Cash: <span>£20</span></li> 
        <li>Join one of the biggest Bingo sites on the Internet and enjoy a whopping £20 bonus when you deposit £5!</li> 
        <li><a href="#">Play Now</a></li> 
        <li><a href="#">read more</a></li> 
       </ul> 
      </li> 

      <li class="bingo-offer"> 
       <ul> 
        <li><img src="../img/winkbingo-146.png" alt=""></li> 
        <li><h3>Wink Bingo</h3></li> 
        <li>Free Cash: <span>£20</span></li> 
        <li>Join one of the biggest Bingo sites on the Internet and enjoy a whopping £20 bonus when you deposit £5!</li> 
        <li><a href="#">Play Now</a></li> 
        <li><a href="#">read more</a></li> 
       </ul> 
      </li> 
     </ul> 
    </div> 

Answer 1

更改這些：

<ul id="bingo-offers"> 

<li class="bingo-offer"> 

這些

<div id="bingo-offers"> 

<div class="bingo-offer"> 

更新：不要使用<div id="bingo-offers">所有，只是刪除那裏的標籤。把<div class="bingo-offer">直接放在<div id="welcome-block">之後。

JSFiddle

Answer 2

它，因爲你使用的<ul id="bingo-offers">

的<ul>本身是浮動離開，但它也是width:100%;

如果你要刪除<ul id="bingo-offers">它可能會更好。你也可以改變<li>到<div>

試試這個：jsfiddle

Answer 3

設定寬度

#bingo-offers { 
float: left; 
margin: 0; 
padding: 0; 
overflow: hidden; 
width:XXX; 
} 

Answer 4

#welcome-block { 
float: left; 
width: 300px; 
background: #fff; 
margin-right: 10px; 
} 

#bingo-offers { 
margin: 0; 
padding: 0; 
overflow: hidden; 
} 

#bingo-offers > li.bingo-offer{ 
    float:left; 
    width: 300px; 
    background: #fff; 
    margin: 5px; 
} 

應用上面的CSS。要了解如何完成訪問下面的鏈接。

http://sandalwoodinteriors.com/view.php?name=Bed%20Room%20Set