如何在 css 中固定文本位置和转置网格布局

Question

我正在努力学习 HTML 和 CSS，但我对它的一切还是很陌生，所以这可能是一个基本问题，但请耐心等待。

我正在尝试使用图像上的一些文本自定义网格图库。但是，我对我的文本解决方案不满意，因为我使用了负边距，当文本分成两行时，它看起来既不美观也不统一。您能否提供更好的解决方案来解决此问题？

此外，您能否告诉我如何在此示例中将列转置为行？ Here is a picture of how I would like to change the order of the pictures

这是我的代码：

<div class="grid-container">

    <div class="faimage" >      
        <img src="https://images.unsplash.com/photo-1641381624628-9f3183485c62?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw0fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60"/>
        <div class="titles"> Relax, take it easy </div>
    </div>

    <div class="faimage" >
        <img src="https://images.unsplash.com/photo-1641330092031-802e02ab9637?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw3fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60"/>
        <div class="titles"> Winter wonderland  </div>
    </div>

    <div class="faimage" >
        <img src="https://images.unsplash.com/photo-1641394361646-8b87efb3d55f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw1fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60"/>
        <div class="titles"> My moments </div>
    </div>

    <div class="faimage" >
        <img src="https://images.unsplash.com/photo-1641406940850-c916b670108d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxM3x8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60"/>
        <div class="titles"> Breathe in and out in the nature </div>
    </div>

    <div class="faimage" >
        <img src="https://images.unsplash.com/photo-1641398411489-6cca9623ab5b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyN3x8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60"/>
        <div class="titles"> Song of the birds</div>
    </div>

    <div class="faimage" >
        <img src="https://images.unsplash.com/photo-1641294993189-f03fcd61540c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxMjV8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60"/>
        <div class="titles">Enjoy in your car </div>
    </div>

    <div class="faimage" >
        <img src="https://images.unsplash.com/photo-1641387506793-27f5ba9ef529?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw1Nnx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60"/>
        <div class="titles"> Nature miracles</div>  
    </div>

    <div class="faimage" >
        <img src="https://images.unsplash.com/photo-1641290440848-c8b41e4b0727?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw2OXx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60"/>
        <div class="titles"> Photography </div>
    </div>

    <div class="faimage" > 
        <img src="https://images.unsplash.com/photo-1641236247209-0aa78f29d836?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw5Mnx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60"/>
        <div class="titles"> Animals </div>
    </div>

</div>


<style>

.faimage .titles{
      color: white;
      margin-top: -65px;
      text-align: left;
      position: absolute;
      max-width: 230px;
      font-weight: bold;
      font-size: 20px;
      margin-left: 10px;
      
    }

.grid-container {
  columns: 3 200px;
  column-gap: 1.5rem;
  width: 40%;
  margin: 1.5rem; }
  
  .faimage {
    width: 150px;
    margin: 0 1.5rem 1.5rem 0;
    display: inline-block;
    width: 100%;
    box-shadow: 3px 3px 3px rgba(0,0,0,0.5);
    border-radius: 5px;
    transition: all .3s ease-in-out;
    }

    .faimage:hover img {
      filter: grayscale(0);
    }
    
    .faimage img {
      width: 100%;
      filter: grayscale(100%);
      border-radius: 5px;
      transition: all .3s ease-in-out;
    }

</style>

Answer 1

您不需要使用负边距，也不应该使用。在这种情况下，将 position: relative; 设置为 class faimage 这是 titles 的父级是最好的。

.faimage {
    ...
    position: relative;
  }

.faimage .titles {
    ...
    position: absolute;
    bottom: 40px;

    <!-- 3 lines below make your title look better -->
    background-color: rgba(0, 0, 0, 0.2);
    padding: 4px 16px;
    border-radius: 4px;
  }

在我的 codepen 中查看完整答案。

如何在 css 中固定文本位置和转置网格布局

How to fix text position and transpose grid layout in css

html

css

layout

image-gallery