首页 > 解决方案 > 将 div 标签中的按钮定位在锚元素下

问题描述

    <div class="row">
     <div class="card px-3">
          <asp:Repeater ID="Repeater1" runat="server">
               <HeaderTemplate>
                    <div id="video-gallery" class="row lightGallery">
               </HeaderTemplate>
               <ItemTemplate>
                    <a class="image-tile col-xl-3 col-lg-3 col-md-3 col-md-4 col-6" href='<%#Eval("VideoURL").ToString() %>'>
                         <img src='<%# getYouTubeThumbnail(Eval("VideoURL").ToString()) %>' alt="thumb image"/>
                         <div class="demo-gallery-poster">
                              <img src="../panel/images/lightbox/play-button.png" alt="thumb image">
                         </div>                                                           
                    </a>

                    <%--i want to put here two buttons. delete and edit--%>
                   <div>
                       <a href='<%# "Video.aspx?Edit="+Eval("VideoID")%>' class="btn btn-outline-primary">Edit</a>
                       <a onclick="return confirm('Are you sure?')" href='<%# "Video.aspx?Delete="+Eval("VideoID")%>' class="btn btn-outline-danger">Delete</a>
                   </div>

               </ItemTemplate>
               <FooterTemplate>
                    </div>
               </FooterTemplate>
          </asp:Repeater>
     </div>
</div>

我想在视频下创建删除和编辑按钮,但是这些按钮出现在视频预览的右侧有 什么想法吗?

标签: htmlcssbuttonvideoabsolute

解决方案


<div>
  <div class="image">
    <img src="https://dummyimage.com/600x400/000/#050505" />
  </div>
  <div class="buttons">
    <a href="">Edit</a>
    <a href="">Delete</a>
  </div>
</div>

试试这个代码。


推荐阅读