css - CSS浮动/包装问题

Question

我不确定如何正确解释这一点，但我正在尝试获取一个元素列表来环绕一个块。

这是我的意思的图像：

代码如下。如果只有 2 个块，它会正确地向左浮动，但是当我添加更多块时，它会下降到欢迎块下方（如图所示）。

该设计在欢迎框旁边显示了 2 个街区，然后在下方显示了 3 个街区。因此，在图像中，第 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

#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

Answer 2

更改这些：

<ul id="bingo-offers">

<li class="bingo-offer">

对这些

<div id="bingo-offers">

<div class="bingo-offer">

更新：根本不要使用<div id="bingo-offers">，只需删除那里的标签。将<div class="bingo-offer">s 直接放在<div id="welcome-block">.

JSFiddle

Answer 3

这是因为您正在使用<ul id="bingo-offers">

它<ul>本身是向左浮动的，但它也是width:100%;

如果你要删除<ul id="bingo-offers">它可能会更好。你也可以<li>改变<div>

试试这个：jsfiddle

Answer 4

设置宽度

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