如何在css中修复文本位置和转置网格布局答案

【问题标题】：How to fix text position and transpose grid layout in css如何在css中修复文本位置和转置网格布局
【发布时间】：2022-01-06 16:44:13
【问题描述】：

我正在尝试学习 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>

【问题讨论】：

a better solution 是什么意思？是否要对齐文本？
我想知道是否可以选择在图片中放置文本而不使用负边距。或者这是一个实用的解决方案？

标签： html css layout image-gallery

【解决方案1】：

您不需要使用负边距，也不应该这样做。在这种情况下，将position: relative; 设置为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 中查看完整答案。

【讨论】：