CSS：第三个内联块元素的问题
[英]CSS: Issue with the third inline-block element
问题描述
Below you can see a code that has 3 lines of inline-block elements. 
您可以在下面看到包含3行内联块元素的代码。 These lines absolutely the same. 这些线条绝对相同。 But the behavior of the third line is very strange. 但第三行的行为很奇怪。 See it yourself at the code snippet. 请在代码片段中亲自查看。 What's wrong with the third line? 第三条线有什么问题？ Why displayed so weird? 为什么显示这么奇怪？
Thank You. 谢谢。
.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>
3 个解决方案
解决方案1
5 2015-10-22 13:00:25
You have no height for your divs. 你的div没有高度。 add height on your partner css. 在你的伴侣css上增加height 。 try: 尝试：
.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>
解决方案2
1 2015-10-22 13:03:39
.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>
解决方案3
1 已采纳 2015-10-22 13:05:10
If you use float and 4 items per row, you'll need to clear the float on the first item of each row (if items have different heights). 如果你使用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>
If you use inline-block , you'll be fine. 如果你使用inline-block ，你会没事的。 But you should not use float + inline-block , they don't work together that well. 但是你不应该使用float + inline-block ，它们不能很好地协同工作。
My suggestion, stick with one of them, I'd vote for inline-block . 我的建议，坚持其中一个，我投票给inline-block 。 And all the parter__* classes can be merged into one I think. 并且我认为所有的parter__*类都可以合并为一个。 Another point worth to mention - How to remove the space between inline-block elements? 另一点值得一提 - 如何删除内联块元素之间的空间？
.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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
使用display：inline-block的CSS问题 - CSS issue with using display:inline-block
CSS内联块宽度问题 - CSS inline-block width issue
带内联块元素的CSS宽度 - css width with an inline-block element
CSS内联块定位问题 - CSS inline-block Positioning Issue
CSS显示：内联块问题 - css display: inline-block issue
CSS内联块对齐问题 - CSS inline-block alignment issue
CSS网格和内联块设计问题 - CSS grid and inline-block design issue
HTML和CSS-内联块元素的问题 - HTML & CSS - Issue with inline-block elements
内联块元素高度问题 - Inline-block element height issue
内联块 css - inline-block css
相关标签