Question

我是CSS新手。我正在尝试创建一个具有图像的布局，我想在其下方添加编辑和删除图标，或者将其覆盖在图像的右下角。到目前为止，我已经能够获得以下样式的图像和图标：

我正在使用物化css和litbox，在物化css文件中，我为图库添加了以下属性，并且具有以下HTML：

gallery {
  margin: 100px 250px;
}

.gallery img {
  width: 150px;
  padding: 5px;
  filter: grayscale(100%);
  transition: .5s;
}

.gallery img:hover {
  filter: grayscale(0);
  transform: scale(1.1);
}

<div class="gallery center">
  <a href="./public/images/demogallery/1.jpg" data-lightbox="mygallery" data-title="This is a test">
    <img src="./public/images/demogallery/1.jpg">
  </a>
  <i class="material-icons blue-grey-text">delete</i>
  <i class="material-icons blue-grey-text">edit</i>
</div>

我的问题是，如何对齐右下角图像下方的编辑和删除图标？该页面上会有很多图像，每个图像下面都会有这些图标。

感谢帮助人员！

Answer 1

像这样吗？

       <div class="gallery center">
        <a href="./public/images/demogallery/1.jpg" data-lightbox="mygallery" data-title="This is a test">
            <img src="./public/images/demogallery/1.jpg">
        </a>

        <br/>
        <div style="float:right;text-align:right;width:50%;">
          <i class="material-icons blue-grey-text">delete</i>
          <i class="material-icons blue-grey-text">edit</i>
        </div>
      </div>

Answer 2

您需要更改图像元素的行为。该图像是嵌入式元素。通过添加display：block，您可以更改它。

gallery {
  margin: 100px 250px;
}

.gallery img {
  display: block;
  width: 150px;
  padding: 5px;
  filter: grayscale(100%);
  transition: .5s;
}

.gallery img:hover {
  filter: grayscale(0);
  transform: scale(1.1);
}

<div class="gallery center">
  <a href="./public/images/demogallery/1.jpg" data-lightbox="mygallery" data-title="This is a test">
    <img src="http://via.placeholder.com/350x150">
  </a>
  <i class="material-icons blue-grey-text">delete</i>
  <i class="material-icons blue-grey-text">edit</i>
</div>

Answer 3

看看.gallery的变化。

.gallery {
  margin: 100px 250px;
  width: 150px;
  text-align: right;
}

.gallery img{
  width: 150px;
  padding: 5px;
  filter: grayscale(100%);
  transition: .5s;
}

.gallery img:hover{
  filter: grayscale(0);
  transform: scale(1.1);
}

<div class="gallery center">
  <a href="https://picsum.photos/458/354" data-lightbox="mygallery" data-title="This is a test">
    <img src="https://picsum.photos/458/354">
  </a>
  <i class="material-icons blue-grey-text">delete</i>
  <i class="material-icons blue-grey-text">edit</i>
</div>

Answer 4

请参见以下代码段

gallery {
  margin: 100px 250px;
  display:flex;
  flex-direction: column;
}

.gallery img{
  width: 150px;
  padding: 5px;
  filter: grayscale(100%);
  transition: .5s;

}

.gallery img:hover{
  filter: grayscale(0);
  transform: scale(1.1);
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.css" />

<div class="gallery center">
            <a href="./public/images/demogallery/1.jpg" data-lightbox="mygallery" data-title="This is a test">
                <img src="https://media.istockphoto.com/photos/flag-of-pakistan-picture-id639704684?k=6&m=639704684&s=612x612&w=0&h=2DyKjXPQlsLEiBXecchlyTpCy3_TcJ7BZp-pew_LL0I=">
            </a>
            <div class="icon">
            <i class="material-icons zmdi  zmdi-delete blue-grey-text">delete</i>
            <i class="material-icons zmdi  zmdi-edit blue-grey-text">edit</i>
            </div>
        </div>

或者，您可以使用display:block并为.gallery类使用固定宽度

Answer 5

将链接包裹在div中。

<div class="gallery center">
            <a href="./public/images/demogallery/1.jpg" data-lightbox="mygallery" data-title="This is a test">
                <img src="./public/images/demogallery/1.jpg">
            </a>
           <div>
                <i class="material-icons blue-grey-text">delete</i>
                <i class="material-icons blue-grey-text">edit</i>
           </div>
</div>

这将解决您的问题。

Answer 6

    <head>
    <style>

    gallery {
      margin: 100px 250px;
    }

    .gallery img{
      width: 150px;
      padding: 5px;
      filter: grayscale(100%);

      transition: .5s;

    }
    .pos
    {
        margin-left:100px;
    }
    .gallery img:hover{
      filter: grayscale(0);
      transform: scale(1.1);
    }
     </style>
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    </head>

   <div class="gallery center">
                <a href="./public/images/demogallery/1.jpg" data-lightbox="mygallery" data-title="This is a test">
 <img src="./public/images/demogallery/1.jpg"></a>

               <div class="pos">

                    <i class="material-icons blue-grey-text">delete</i>
                    <i class="material-icons blue-grey-text">edit</i>
                </div>  
         </div>

在图片下方放置编辑和删除图标

6 个答案: