如何更好地执行 DIV 并处理 css答案

【问题标题】：How to perform DIV better and deal with the css如何更好地执行 DIV 并处理 css
【发布时间】：2021-09-28 01:56:14
【问题描述】：

首先，它是 React 中的一个循环，并假定为移动版本。

在DIV 的每个循环中，左侧都会有一张照片（150*150px）。在照片的右侧，它将有 3 个div，每个div 将有一个p（姓名、汽车和工资）。在底部，它将有一条线，其长度将与父 div 相同。

一个特别的地方是pof 车会有很多字，当手机宽度不够的时候会去下一行。如果还不够，那就变成特斯拉、本田、宝马……

它是Sample Image

我确实尝试了很多方法（float，position，...），但我仍然无法处理它，

这是 HTML 部分（使用 React）

<div className='loop'>
   <img className='image' src={value.image}></img>
       <div>
           <p className='title'>{value.name}</p>
       </div>
       <div class>
           <p className='car'>Tesla, Honda, BMW, Porsch,Mitsubishi, Mazda, Toyota, Jaguar, KIA </p>
       </div>
       <div>
           <p>{value.salary}</p>
       </div>
       <div className='linebreak'></div>
 </div>

【问题讨论】：

标签： html css reactjs css-float

【解决方案1】：

尝试使用网格：

.loop {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: .5em;
  width: 400px
}
.image {
  grid-row: span 3;
}
.linebreak {
  margin-top: .5em;
  grid-column: span 2;
  border: 2px solid #4f86f7;
}
.loop p, img {
  border: 2px solid #777696;
  margin: 0;
}
.title {
  align-self: start;
}
.salary {
  align-self: end;
}

<div class='loop'>
   <img class='image' src="https://picsum.photos/100" />
   <p class='title'>name</p>
   <p class='car'>Tesla, Honda, BMW, Porsch,Mitsubishi, Mazda, Toyota, Jaguar, KIA </p>
   <p class='salary'>salary</p>
   <div class='linebreak'></div>
</div>

【讨论】：