css - 为什么附近的 DIV 不会与此 DIV 浮动在同一条线上？

Question

我在div.website-thumbnail下面的代码中添加了另一个，但是 div<span class="website-title">Business Coach</span>被隔离在自己的行上，就好像它有一样clear: left;- 没有其他浮动与 div的其余部分一样div.website-thumbnail在同一行上。<span class="website-title">Business Coach</span>div.website-thumbnail

        .website-thumbnail {width: calc(25% - 10px); float: left; margin: 5px;}
        .website-thumbnail img {max-width: 100%;}
        .website-title {display: inline-block; text-align: center; width: 100%; background-color: #ec0c8d; color: white; padding: 5px 0;}
        @media (max-width: 900px) {
            .website-thumbnail {width: calc(33% - 10px);}
        }
        @media (max-width: 700px) {
            .website-thumbnail {width: calc(50% - 10px);}
        }

    <div class="website-thumbnail"><span class="website-title">Accountant</span><a href="/accountant/" target="_blank" rel="noopener noreferrer"><img title="Accountant Website Design" src="https://websites.insightdesign.com.au/wp-content/uploads/2019/03/websites-insightdesign-accountant.jpg" /></a></div>
    <div class="website-thumbnail"><span class="website-title">Air & Heating</span><a href="/air-and-heating/" target="_blank" rel="noopener noreferrer"><img title="Air & Heating Website Design" src="https://websites.insightdesign.com.au/wp-content/uploads/2019/11/websites-insightdesign-air-and-heating-scaled.jpg" /></a></div>
    <div class="website-thumbnail"><span class="website-title">Animal Shelter</span><a href="/animal-shelter/" target="_blank" rel="noopener noreferrer"><img title="Animal Shelter Website Design" src="https://websites.insightdesign.com.au/wp-content/uploads/2019/03/websites-insightdesign-animal-shelter.jpg" /></a></div>
    <div class="website-thumbnail"><span class="website-title">Architecture Firm</span><a href="/architecture-firm/" target="_blank" rel="noopener noreferrer"><img title="Architecture Firm Website Design" src="https://websites.insightdesign.com.au/wp-content/uploads/2019/03/websites-insightdesign-architecture-firm.jpg" /></a></div>
    <div class="website-thumbnail"><span class="website-title">Art Gallery</span><a href="/art-gallery/" target="_blank" rel="noopener noreferrer"><img title="Architecture Firm Website Design" src="https://websites.insightdesign.com.au/wp-content/uploads/2019/07/websites-insightdesign-art-gallery.jpg" /></a></div>
    <div class="website-thumbnail"><span class="website-title">Author / Writer</span><a href="/author-writer/" target="_blank" rel="noopener noreferrer"><img title="Author / Writer Website Design" src="https://websites.insightdesign.com.au/wp-content/uploads/2019/03/websites-insightdesign-author-writer.jpg" /></a></div>
    <div class="website-thumbnail"><span class="website-title">Auto Services</span><a href="/auto-services/" target="_blank" rel="noopener noreferrer"><img title="Auto Services Website Design" src="https://websites.insightdesign.com.au/wp-content/uploads/2019/03/websites-insightdesign-auto-services.jpg" /></a></div>
    <div class="website-thumbnail"><span class="website-title">Babysitter Services</span><a href="/babysitter-services/" target="_blank" rel="noopener noreferrer"><img title="Babysitter Services Website Design" src="https://websites.insightdesign.com.au/wp-content/uploads/2019/03/websites-insightdesign-babysitter-services.jpg" /></a></div>
    <div class="website-thumbnail"><span class="website-title">Bakery</span><a href="/bakery/" target="_blank" rel="noopener noreferrer"><img title="Bakery Website Design" src="https://websites.insightdesign.com.au/wp-content/uploads/2019/07/websites-insightdesign-bakery.jpg" /></a></div>
    <div class="website-thumbnail"><span class="website-title">Bar</span><a href="/bar/" target="_blank" rel="noopener noreferrer"><img title="Small Bar Website Design" src="https://websites.insightdesign.com.au/wp-content/uploads/2019/10/websites-insightdesign-bar.jpg" /></a></div>
    <div class="website-thumbnail"><span class="website-title">Bed and Breakfast</span><a href="/bed-and-breakfast/" target="_blank" rel="noopener noreferrer"><img title="Bed and Breakfast Website Design" src="https://websites.insightdesign.com.au/wp-content/uploads/2019/03/websites-insightdesign-bed-and-breakfast.jpg" /></a></div>
    <div class="website-thumbnail"><span class="website-title">Bistro</span><a href="/bistro/" target="_blank" rel="noopener noreferrer"><img title="Bistro Website Design" src="https://websites.insightdesign.com.au/wp-content/uploads/2019/12/websites-insightdesign-bistro-scaled.jpg" /></a></div>
    <div class="website-thumbnail"><span class="website-title">Business Coach</span><a href="/business-coach/" target="_blank" rel="noopener noreferrer"><img title="Business Coach Website Design" src="https://websites.insightdesign.com.au/wp-content/uploads/2019/03/websites-insightdesign-business-coach.jpg" /></a></div>
    <div class="website-thumbnail"><span class="website-title">Business Consultant</span><a href="/business-consultant/" target="_blank" rel="noopener noreferrer"><img title="Business Consultant Website Design" src="https://websites.insightdesign.com.au/wp-content/uploads/2019/03/websites-insightdesign-business-consultant.jpg" /></a></div>
    <div class="website-thumbnail"><span class="website-title">Butcher</span><a href="/butcher/" target="_blank" rel="noopener noreferrer"><img title="Butcher Website Design" src="https://websites.insightdesign.com.au/wp-content/uploads/2019/03/websites-insightdesign-butcher.jpg" /></a></div>
    <div class="website-thumbnail"><span class="website-title">Calligrapher</span><a href="/calligrapher/" target="_blank" rel="noopener noreferrer"><img title="Calligrapher  Website Design" src="https://websites.insightdesign.com.au/wp-content/uploads/2019/07/websites-insightdesign-calligrapher.jpg" /></a></div>
    <div class="website-thumbnail"><span class="website-title">Cake Maker</span><a href="/cake-maker/" target="_blank" rel="noopener noreferrer"><img title="Cake Maker" src="https://websites.insightdesign.com.au/wp-content/uploads/2019/08/websites-insightdesign-cake-maker.jpg" /></a></div>
    <div class="website-thumbnail"><span class="website-title">Candy Shop</span><a href="/candy-shop/" target="_blank" rel="noopener noreferrer"><img title="Candy Shop Website Design" src="https://websites.insightdesign.com.au/wp-content/uploads/2019/07/websites-insightdesign-candy-shop.jpg" /></a></div>

您需要单击“扩展片段”才能在桌面视口中查看效果，这就是问题所在。

帮助表示赞赏。

您可以在桌面屏幕的第 4 行屏幕截图中看到现场效果。

标签： css

Answer 1

我添加了以下内容以解决此问题：

.website-thumbnail {
 position: relative;
 display: inline-block;
 width: 24%;
 /* float: left; */
 vertical-align: top;
 margin: auto;
}