如何解决我如何为第 n 个孩子使用浮点数
我有 div 的 foreach 循环包含图像和数据 我想让索引图像向左浮动,数据向右浮动 奇数索引浮点数据向左,图像向右 但它不起作用
.row.front-page-category:nth-child(even) .imagecard {
float: left;
}
.row.front-page-category:nth-child(even) .details-card {
float: right;
}
<div class="container p-2 front-page-slider">
@foreach ($cars as $car)
<div class="row front-page-category shadow-sm mt-3 rounded" data-aos="fade-{{ $loop->index%2 ? 'left' : 'right' }}" data-aos-duration="1000">
<div class="imagecard w-50 ">
<img src="{{asset('images/'.$car->image)}}" class="card-img-top-slider float-end user" alt="...">
</div>
<div class="continer details-card w-25">
<div>{{($car->brand) }}</div>
<div>{{($car->price) }} </div>
<div>{{($car->type) }} </div>
</div>
</div>
@endforeach
</div>
<div class="container p-2 front-page-slider">
@foreach ($cars as $car)
<div class="row front-page-category shadow-sm mt-3 rounded" data-aos="fade-{{ $loop->index%2 ? 'left' : 'right' }}" data-aos-duration="1000">
<div class="imagecard w-50 m{{ $loop->index%2 ? 'l' : 'r' }}-auto">
<img src="{{asset('images/'.$car->image)}}" class="card-img-top-slider float-end user" alt="...">
</div>
<div class="continer details-card w-25">
<div>{{($car->brand) }}</div>
<div>{{($car->price) }} </div>
<div>{{($car->type) }} </div>
</div>
</div>
@endforeach
</div>
解决方法
尽量去掉图片和其他div中的这些float相关的类
,我认为您应该为偶数和奇数孩子添加浮动样式,就像我下面的代码片段一样。
.row > .left {
width: 50%; height: 50px;
background: blue;
}
.row > .right {
width: 25%; height: 50px;
background: red;
}
.row:nth-child(odd) > .left {
float: left;
}
.row:nth-child(odd) > .right {
float: right;
}
.row:nth-child(even) > .left {
float: right;
}
.row:nth-child(even) > .right {
float: left;
}
<div class="row">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="row">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="row">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="row">
<div class="left"></div>
<div class="right"></div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。