如何解决为什么在第三行之后float属性不能正常工作?
经过几行后,css float属性有一个奇怪的行为,我不知道其原因。
请考虑到我无法在行之间添加具有“ clear”属性的div,因为html将动态生成(PHP循环)。
我认为,为了做到这一点,我应该在PHP中创建一个函数,该函数确定何时在行之间插入一个清晰的div,因为有时每隔2张图片有时3张图片。
但是我更喜欢CSS解决方案。
这是完整的代码:
.row {
width: 600px;
text-align: center;
margin: 0 auto;
}
.Boxes{
Box-sizing: border-Box;
position: relative;
min-height: 1px;
height: auto;
float: left;
padding-left: 10px;
padding-bottom: 10px;
}
.Box1 {
width: 33.33333333333333%;
}
.Box2 {
width: 66.66666666666666%;
}
.Box-inner {
background-color: grey;
width: 100%;
height: 100%;
}
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
<html>
<body>
<div class="row">
<div class="Box1 Boxes">
<div class="Box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="Box1 Boxes">
<div class="Box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="Box1 Boxes">
<div class="Box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="Box1 Boxes">
<div class="Box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="Box2 Boxes">
<div class="Box-inner">
<img class="img-responsive" src="https://picsum.photos/770/238?random=1" alt="">
</div>
</div>
<div class="Box2 Boxes">
<div class="Box-inner">
<img class="img-responsive" src="https://picsum.photos/770/238?random=1" alt="">
</div>
</div>
<div class="Box1 Boxes">
<div class="Box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="Box1 Boxes">
<div class="Box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="Box1 Boxes">
<div class="Box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="Box1 Boxes">
<div class="Box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
</div>
</body>
</html>
解决方法
在您的示例中,您的图像比之前的图像稍短。这导致 container.RegisterInstance<Func<IHandler,HandlerType,IHandler>>
((handler,type) =>
{
IHandler context = null;
switch (type)
{
case HandlerType.Type0:
context = new Type0(orderHandler,container.GetInstance<IUtilityLogic>());
break;
case HandlerType.Type1:
context = new Type1(orderHandler,container.GetInstance<IUtilityLogic>(),container.GetInstance<IShipmentLogic>());
break;
case HandlerType.Type2:
context = new Type2(orderHandler);
break;
case HandlerType.Type3:
context = new Type3(orderHandler,container.GetInstance<IUtilityLogic>());
break;
case HandlerType.Type4:
context = new Type4(orderHandler,container.GetInstance<IShipmentLogic>(),container.GetInstance<Func<string,string,ICache>>());
break;
default:
context = null;
break;
}
return context;
});
通常会修复的下一行出现间隙。如果每行的元素数相同,则可以使用clear
之类的东西,但请注意,因为您说过每行的元素数可能会改变,所以这行不通。一个简单的解决方法是在nth-child
类上设置最小高度:
.box-inner
.row {
width: 600px;
text-align: center;
margin: 0 auto;
}
.boxes {
box-sizing: border-box;
position: relative;
min-height: 1px;
height: auto;
float: left;
padding-left: 10px;
padding-bottom: 10px;
}
.box1 {
width: 33.33333333333333%;
}
.box2 {
width: 66.66666666666666%;
}
.box-inner {
background-color: grey;
width: 100%;
height: 100%;
min-height: 122px;
}
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
,
最简单的解决方案是在容器中添加固定高度。
.box-inner {
background-color: grey;
width: 100%;
height: 120px;
overflow: hidden;
}
上述内容的另一项补充是增加对象适合度:覆盖图像以确保其填充容器空间。
.box-inner img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。