CSS：第三個內聯塊元素的問題

Question

您可以在下面看到包含3行內聯塊元素的代碼。 這些線條絕對相同。 但第三行的行為​​很奇怪。 請在代碼片段中親自查看。 第三條線有什么問題？ 為什么顯示這么奇怪？

謝謝。

 .partners { width: 940px; text-align: center; margin: 95px auto 0 auto; } .partners__h2 { color: #333; font-weight: bold; font-size: 22px; text-align: center; margin-bottom: 32px; } .wrap { background: #a1a1a1; } .partners li { display: inline-block; vertical-align: text-top; } .partner__wrap { bottom: 0; width: 100%; text-align: center; } .partner__name { display: block; float: left; width: 100%; font-weight: bold; color: #333; font-size: 14px; margin-bottom: 0px; } .partner__description { font-family: Roboto; font-weight: 300; color: #666; font-size: 14px; text-align: center; float: left; margin-top: 10px; } .partner__1 { width: 220px; height: 100%; float: left; } .partner__2 { width: 220px; height: 100%; margin-right: 16px; } .partner__3 { width: 220px; height: 100%; } .partner__4 { width: 220px; height: 100%; float: right; } .partner__5 { float: left; height: 100%; width: 220px; } .partner__6 { height: 100%; margin-right: 16px; width: 220px; } .partner__7 { height: 100%; width: 220px; } .partner__8 { width: 220px; height: 100%; float: right; } .partner__9 { float: left; width: 220px; height: 100%; } .partner__10 { width: 220px; height: 100%; margin-right: 16px; } .partner__11 { width: 220px; height: 100%; } .partner__12 { float: right; width: 220px; height: 100%; } .partner { background: #ddd; vertical-align: top; display: inline-block; } 

 <div class="partners"> <div class="partners__container"> <div class="wrap"> <div class="partner__1 partner"> <div class="partner__wrap"> <h4 class="partner__name">In enim justo</h4> <p class="partner__description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> </div> <div class="partner__2 partner"> <div class="partner__wrap"> <h4 class="partner__name">In enim justo</h4> <p class="partner__description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> </div> <div class="partner__3 partner"> <div class="partner_wrap"> <h4 class="partner__name">In enim justo</h4> <p class="partner__description">I get my inspiration from nature and objects around me. I have a passion to colours, typography and skateboards.</p> </div> </div> <div class="partner__4 partner"> <div class="partner_wrap"> <h4 class="partner__name">In enim justo</h4> <p class="partner__description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> </div> <div class="partner__5 partner"> <div class="partner_wrap"> <h4 class="partner__name">In enim justo</h4> <p class="partner__description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> </div> <div class="partner__6 partner"> <div class="partner_wrap"> <h4 class="partner__name">In enim justo</h4> <p class="partner__description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> </div> <div class="partner__7 partner"> <div class="partner_wrap"> <h4 class="partner__name">In enim justo</h4> <p class="partner__description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> </div> <div class="partner__8 partner"> <div class="partner_wrap"> <h4 class="partner__name">In enim justo</h4> <p class="partner__description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> </div> <div class="partner__9 partner"> <div class="partner_wrap"> <h4 class="partner__name">In enim justo</h4> <p class="partner__description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> </div> <div class="partner__10 partner"> <div class="partner_wrap"> <h4 class="partner__name">In enim justo</h4> <p class="partner__description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> </div> <div class="partner__11 partner"> <div class="partner_wrap"> <h4 class="partner__name">In enim justo</h4> <p class="partner__description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> </div> <div class="partner__12 partner"> <div class="partner_wrap"> <h4 class="partner__name">In enim justo</h4> <p class="partner__description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> </div> </div> </div> </div> 

Answer 1

你的div沒有高度。 在你的伴侶css上增加height 。 嘗試：

 .partners { width: 940px; text-align: center; margin: 95px auto 0 auto; } .partners__h2 { color: #333; font-weight: bold; font-size: 22px; text-align: center; margin-bottom: 32px; } .wrap { background: #a1a1a1; } .partners li { display: inline-block; vertical-align: text-top; } .partner__wrap { bottom: 0; width: 100%; text-align: center; } .partner__name { display: block; float: left; width: 100%; font-weight: bold; color: #333; font-size: 14px; margin-bottom: 0px; } .partner__description { font-family: Roboto; font-weight: 300; color: #666; font-size: 14px; text-align: center; float: left; margin-top: 10px; } .partner__1 { width: 220px; height: 100%; float: left; } .partner__2 { width: 220px; height: 100%; margin-right: 16px; } .partner__3 { width: 220px; height: 100%; } .partner__4 { width: 220px; height: 100%; float: right; } .partner__5 { float: left; height: 100%; width: 220px; } .partner__6 { height: 100%; margin-right: 16px; width: 220px; } .partner__7 { height: 100%; width: 220px; } .partner__8 { width: 220px; height: 100%; float: right; } .partner__9 { float: left; width: 220px; height: 100%; } .partner__10 { width: 220px; height: 100%; margin-right: 16px; } .partner__11 { width: 220px; height: 100%; } .partner__12 { float: right; width: 220px; height: 100%; } .partner { background: #ddd; vertical-align: top; display: inline-block; height:100px; } 

 <div class="partners"> <div class="partners__container"> <div class="wrap"> <div class="partner__1 partner"> <div class="partner__wrap"> <h4 class="partner__name">In enim justo</h4> <p class="partner__description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> </div> <div class="partner__2 partner"> <div class="partner__wrap"> <h4 class="partner__name">In enim justo</h4> <p class="partner__description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> </div> <div class="partner__3 partner"> <div class="partner_wrap"> <h4 class="partner__name">In enim justo</h4> <p class="partner__description">I get my inspiration from nature and objects around me. I have a passion to colours, typography and skateboards.</p> </div> </div> <div class="partner__4 partner"> <div class="partner_wrap"> <h4 class="partner__name">In enim justo</h4> <p class="partner__description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> </div> <div class="partner__5 partner"> <div class="partner_wrap"> <h4 class="partner__name">In enim justo</h4> <p class="partner__description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> </div> <div class="partner__6 partner"> <div class="partner_wrap"> <h4 class="partner__name">In enim justo</h4> <p class="partner__description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> </div> <div class="partner__7 partner"> <div class="partner_wrap"> <h4 class="partner__name">In enim justo</h4> <p class="partner__description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> </div> <div class="partner__8 partner"> <div class="partner_wrap"> <h4 class="partner__name">In enim justo</h4> <p class="partner__description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> </div> <div class="partner__9 partner"> <div class="partner_wrap"> <h4 class="partner__name">In enim justo</h4> <p class="partner__description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> </div> <div class="partner__10 partner"> <div class="partner_wrap"> <h4 class="partner__name">In enim justo</h4> <p class="partner__description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> </div> <div class="partner__11 partner"> <div class="partner_wrap"> <h4 class="partner__name">In enim justo</h4> <p class="partner__description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> </div> <div class="partner__12 partner"> <div class="partner_wrap"> <h4 class="partner__name">In enim justo</h4> <p class="partner__description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> </div> </div> </div> </div> 

Answer 2

 .partners { width: 940px; text-align: center; margin: 95px auto 0 auto; } .partners__h2 { color: #333; font-weight: bold; font-size: 22px; text-align: center; margin-bottom: 32px; } .wrap { background: #a1a1a1; } .partners li { display: inline-block; vertical-align: text-top; } .partner__wrap { bottom: 0; width: 100%; text-align: center; } .partner__name { display: block; float: left; width: 100%; font-weight: bold; color: #333; font-size: 14px; margin-bottom: 0px; } .partner__description { font-family: Roboto; font-weight: 300; color: #666; font-size: 14px; text-align: center; float: left; margin-top: 10px; } .partner__1 { width: 220px; height: 100%; float: left; } .partner__2 { width: 220px; height: 100%; margin-right: 16px; } .partner__3 { width: 220px; height: 100%; } .partner__4 { width: 220px; height: 100%; float: right; } .partner__5 { float: left; height: 100%; width: 220px; } .partner__6 { height: 100%; margin-right: 16px; width: 220px; } .partner__7 { height: 100%; width: 220px; } .partner__8 { width: 220px; height: 100%; float: right; } .partner__9 { float: left; width: 220px; height: 100%; } .partner__10 { width: 220px; height: 100%; margin-right: 16px; } .partner__11 { width: 220px; height: 100%; } .partner__12 { float: right; width: 220px; height: 100%; } .partner { background: #ddd; vertical-align: top; display: block; margin: 0 5px; float: left; } .partner:nth-child(4n + 1){ clear:both; } 

 <div class="partners"> <div class="partners__container"> <div class="wrap"> <div class="partner__1 partner"> <div class="partner__wrap"> <h4 class="partner__name">In enim justo</h4> <p class="partner__description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> </div> <div class="partner__2 partner"> <div class="partner__wrap"> <h4 class="partner__name">In enim justo</h4> <p class="partner__description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> </div> <div class="partner__3 partner"> <div class="partner_wrap"> <h4 class="partner__name">In enim justo</h4> <p class="partner__description">I get my inspiration from nature and objects around me. I have a passion to colours, typography and skateboards.</p> </div> </div> <div class="partner__4 partner"> <div class="partner_wrap"> <h4 class="partner__name">In enim justo</h4> <p class="partner__description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> </div> <div class="partner__5 partner"> <div class="partner_wrap"> <h4 class="partner__name">In enim justo</h4> <p class="partner__description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> </div> <div class="partner__6 partner"> <div class="partner_wrap"> <h4 class="partner__name">In enim justo</h4> <p class="partner__description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> </div> <div class="partner__7 partner"> <div class="partner_wrap"> <h4 class="partner__name">In enim justo</h4> <p class="partner__description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> </div> <div class="partner__8 partner"> <div class="partner_wrap"> <h4 class="partner__name">In enim justo</h4> <p class="partner__description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> </div> <div class="partner__9 partner"> <div class="partner_wrap"> <h4 class="partner__name">In enim justo</h4> <p class="partner__description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> </div> <div class="partner__10 partner"> <div class="partner_wrap"> <h4 class="partner__name">In enim justo</h4> <p class="partner__description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> </div> <div class="partner__11 partner"> <div class="partner_wrap"> <h4 class="partner__name">In enim justo</h4> <p class="partner__description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> </div> <div class="partner__12 partner"> <div class="partner_wrap"> <h4 class="partner__name">In enim justo</h4> <p class="partner__description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> </div> </div> </div> </div> 

Answer 3

如果你使用float和每行4個項目，你需要清除每行第一項的浮動（如果項目有不同的高度）。

 .partners { width: 940px; text-align: center; margin: 95px auto 0 auto; } .partners__h2 { color: #333; font-weight: bold; font-size: 22px; text-align: center; margin-bottom: 32px; } .wrap { background: #a1a1a1; overflow: hidden; } .partner__wrap { bottom: 0; width: 100%; text-align: center; } .partner__name { display: block; float: left; width: 100%; font-weight: bold; color: #333; font-size: 14px; margin-bottom: 0px; } .partner__description { font-family: Roboto; font-weight: 300; color: #666; font-size: 14px; text-align: center; float: left; margin-top: 10px; } .partner { width: 220px; height: 100%; margin: 0 7.5px 20px; background: #ddd; /* vertical-align: top; */ /* display: inline-block; */ float: left; } .partner:nth-child(4n+1) { clear: both; } 

 <div class="partners"> <div class="partners__container"> <div class="wrap"> <div class="partner__1 partner"> <div class="partner__wrap"> <h4 class="partner__name">In enim justo</h4> <p class="partner__description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> </div> <div class="partner__2 partner"> <div class="partner__wrap"> <h4 class="partner__name">In enim justo</h4> <p class="partner__description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> </div> <div class="partner__3 partner"> <div class="partner_wrap"> <h4 class="partner__name">In enim justo</h4> <p class="partner__description">I get my inspiration from nature and objects around me. I have a passion to colours, typography and skateboards.</p> </div> </div> <div class="partner__4 partner"> <div class="partner_wrap"> <h4 class="partner__name">In enim justo</h4> <p class="partner__description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> </div> <div class="partner__5 partner"> <div class="partner_wrap"> <h4 class="partner__name">In enim justo</h4> <p class="partner__description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> </div> <div class="partner__6 partner"> <div class="partner_wrap"> <h4 class="partner__name">In enim justo</h4> <p class="partner__description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> </div> <div class="partner__7 partner"> <div class="partner_wrap"> <h4 class="partner__name">In enim justo</h4> <p class="partner__description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> </div> <div class="partner__8 partner"> <div class="partner_wrap"> <h4 class="partner__name">In enim justo</h4> <p class="partner__description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> </div> <div class="partner__9 partner"> <div class="partner_wrap"> <h4 class="partner__name">In enim justo</h4> <p class="partner__description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> </div> <div class="partner__10 partner"> <div class="partner_wrap"> <h4 class="partner__name">In enim justo</h4> <p class="partner__description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> </div> <div class="partner__11 partner"> <div class="partner_wrap"> <h4 class="partner__name">In enim justo</h4> <p class="partner__description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> </div> <div class="partner__12 partner"> <div class="partner_wrap"> <h4 class="partner__name">In enim justo</h4> <p class="partner__description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> </div> </div> </div> </div> 

如果你使用inline-block ，你會沒事的。 但是你不應該使用float + inline-block ，它們不能很好地協同工作。

我的建議，堅持其中一個，我投票給inline-block 。 並且我認為所有的parter__*類都可以合並為一個。 另一點值得一提 - 如何刪除內聯塊元素之間的空間？

 .partners { width: 940px; text-align: center; margin: 95px auto 0 auto; } .partners__h2 { color: #333; font-weight: bold; font-size: 22px; text-align: center; margin-bottom: 32px; } .wrap { background: #a1a1a1; } .partner__wrap { bottom: 0; width: 100%; text-align: center; } .partner__name { display: block; float: left; width: 100%; font-weight: bold; color: #333; font-size: 14px; margin-bottom: 0px; } .partner__description { font-family: Roboto; font-weight: 300; color: #666; font-size: 14px; text-align: center; float: left; margin-top: 10px; } .partner { width: 220px; height: 100%; margin: 0 3.5px 20px; background: #ddd; vertical-align: top; display: inline-block; /* float: left; */ } 

 <div class="partners"> <div class="partners__container"> <div class="wrap"> <div class="partner__1 partner"> <div class="partner__wrap"> <h4 class="partner__name">In enim justo</h4> <p class="partner__description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> </div> <div class="partner__2 partner"> <div class="partner__wrap"> <h4 class="partner__name">In enim justo</h4> <p class="partner__description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> </div> <div class="partner__3 partner"> <div class="partner_wrap"> <h4 class="partner__name">In enim justo</h4> <p class="partner__description">I get my inspiration from nature and objects around me. I have a passion to colours, typography and skateboards.</p> </div> </div> <div class="partner__4 partner"> <div class="partner_wrap"> <h4 class="partner__name">In enim justo</h4> <p class="partner__description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> </div> <div class="partner__5 partner"> <div class="partner_wrap"> <h4 class="partner__name">In enim justo</h4> <p class="partner__description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> </div> <div class="partner__6 partner"> <div class="partner_wrap"> <h4 class="partner__name">In enim justo</h4> <p class="partner__description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> </div> <div class="partner__7 partner"> <div class="partner_wrap"> <h4 class="partner__name">In enim justo</h4> <p class="partner__description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> </div> <div class="partner__8 partner"> <div class="partner_wrap"> <h4 class="partner__name">In enim justo</h4> <p class="partner__description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> </div> <div class="partner__9 partner"> <div class="partner_wrap"> <h4 class="partner__name">In enim justo</h4> <p class="partner__description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> </div> <div class="partner__10 partner"> <div class="partner_wrap"> <h4 class="partner__name">In enim justo</h4> <p class="partner__description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> </div> <div class="partner__11 partner"> <div class="partner_wrap"> <h4 class="partner__name">In enim justo</h4> <p class="partner__description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> </div> <div class="partner__12 partner"> <div class="partner_wrap"> <h4 class="partner__name">In enim justo</h4> <p class="partner__description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> </div> </div> </div> </div>