Question

我不确定如何正确解释这个问题，但我正在尝试获取一个包含块的元素列表。

以下是我的意思： enter image description here

代码如下。如果只有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

因为您使用的是<ul id="bingo-offers">

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

如果您要移除<ul id="bingo-offers">，它可能会更好。您也可以将<li>更改为<div>

试试这个：jsfiddle

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">直接放在<div id="welcome-block">。

之后

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

CSS浮动/包装问题

4 个答案: