下面您可以看到包含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>
答案 0 :(得分：5)
你的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>
答案 1 :(得分：1)
.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>
答案 2 :(得分：1)
如果您每行使用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__*类都可以合并为一个。另一点值得一提 - 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>