如何使用 CSS 和 HTML 从右向左移动表格答案

【问题标题】：How do I move a table from right to left using CSS and HTML如何使用 CSS 和 HTML 从右向左移动表格
【发布时间】：2020-05-13 20:39:30
【问题描述】：

我在页脚有一个表格行，它显示来自数据库的图像。我希望表格行从右侧进入页面并在页面左侧消失，直到显示所有图像。我已使用此代码显示图像

app.blade.php

<div class="footer">
    <div class="row justify-content-center">
        <div class="container">
           <div class=""> 
                @foreach($logo as $l)
                    <!--<div class="footercar" style="margin:6px;">-->
                    <!--    <img class="" src="https://partners.hotelstore.co.ke/public{{ $l->company_logo }}" style="width:150px; height:100px;">-->
                    <!--</div>-->
                    <table class="footercar">
                        <tr>
                            <td>
                                <img class="" src="https://partners.hotelstore.co.ke/public{{ $l->company_logo }}" style="width:150px; height:100px;">
                            </td>
                        </tr>
                    </table>
        @endforeach
        </div>
        </div>
    </div>
    <div class="mytext">
        <p class="footertext">&copy; Copyright <?php //echo date("Y"); ?> Hotel Store Partners</p>
    </div>
</div>

app.css

.footer{
  position: fixed;
  height:150px;
  bottom: 0px;
  width: 100%;
  background-color: #DCDCDC;
  text-align:  center;
  margin-top:-200px;
}
.footercar, table{
  background-color:rgb(220,220,220);
  animation: moveImage 3s linear infinite;
  display:inline;
  left: -350px;
}
.footerminicar{
  padding: 2px 16px; 
}
@keyframes moveImage {
 100% {
  transform: translateX(calc(100vw + 350px));
}
}
.footertext{
 font-size:14px;
 color:#000000;
}

我已设法显示图像。 CSS似乎不起作用。如何让它工作？

【问题讨论】：

你可以试试为图片添加

标签： html css laravel-blade

【解决方案1】：

我在选取框标签内使用了 foreach 循环

app.blade.php

<table class="footercar">
 <tr class="">
  <td>
   <marquee id="ImageSilder">
   @foreach($logo as $l)
    <img class="mimg" src="https://partners.hotelstore.co.ke/public{{ $l->company_logo }}" style="width:150px; height:100px;">
   @endforeach
   </marquee>
  </td>
 </tr>
</table>

app.css

#ImageSilder, .mimg{
  height: 200px;
  width: auto;
  padding-left:5px;
}

【讨论】：

终于拿到了吗？

【解决方案2】：

最简单的方法是使用html标签marquee

#ImageSilder img{
  height: 200px;
  width: auto;
  object-fit; cover;
}

<table>
  <tfoot>
    <tr>
      <th>
      <marquee id="ImageSilder">
          <img src="https://img.freepik.com/free-psd/white-frame-mock-up-wall_23-2148374732.jpg?size=664&ext=jpg" />
          <img src="https://img.freepik.com/free-psd/let-s-go-travel-man-looking-his-phone-shoulder-shot_23-2148415994.jpg?size=664&ext=jpg" />
          <img src="https://img.freepik.com/free-psd/golden-logo-mockup-luxury_145275-32.jpg?size=664&ext=jpg" />
        </marquee>
      </th>
    </tr>
  </tfoot>
</table>

【讨论】：