我如何为第 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>