css - 在 div 末尾添加一行时遇到问题，而且 div 宽度不是 100%

Question

我正在学习 React，我试图在这里模拟这个设计:https://www.figma.com/file/QG4cOExkdbIbhSfWJhs2gs/Travel-Journal?node-id=2%3A2&t=LV3bLPEMOLMR8ksp-0

我开始从事这个元素，并且或多或少地完成了它。

但是，我遇到了麻烦

1. 在每个 trip-div 之后添加换行符。我以为我可以在“.map”循环中这样做，但它打破了。我该如何处理？

const trips = data.map(trip=>{
  return (<Trip
    item={trip}
    /> <hr>)
})

由于某种原因，trip-div 没有向右扩展 100%。肯定和 max-widht 有关，但我无法理解。

这是我的代码:https://scrimba.com/scrim/c3rDMnUL

旅行

export default function Trip(prop){
    return(
        <div className='trip container'>
            <div className="trip-main">
                <img src={prop.item.imageUrl} alt="" className="trip-img" />
            </div>
            <div className="trip-aside">
                <p className="trip-location">{prop.item.location} <a href={prop.item.googleMapsUrl} className="trip-google-maps">View on Maps</a></p>
                
                <h2 className="trip-title">{prop.item.location}</h2>
                <p className="trip-dates">{prop.item.startDate} - {prop.item.endDate}</p>
                <p className="trip-description">{prop.item.description}</p>
            </div>
        </div>
    )
}

应用程序

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import Nav from "./components/Nav"
import Trip from "./components/Trip"
import data from '../src/assets/data'


const trips = data.map(trip=>{
  return (<Trip
    item={trip}
    />)
})

function App() {
  const [count, setCount] = useState(0)

  return (
    <div className="App">
      <Nav/>
      {trips}
    </div>
  )
}

export default App

CSS

* {box-sizing: border-box;}

#root{
  max-width: 600px;
}

body{
  margin: 0;
  font-family: 'Inter';
  background: #FFFFFF;
 
}

h1,h2,h3,p {
  margin:0
}

.container {
  padding: 0 40px;
}

nav {
  height: 55px;
  background: #F55A5A;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2.5rem;
}

.nav-img {
  margin-right: 7px;

}

.nav-title{
  font-style: normal;
  font-weight: 500;
  font-size: 14.4608px;
  line-height: 18px;
  letter-spacing: -0.075em;
  color: #FFFFFF;
}


.trip{
  display: flex;
  gap: 20px;
  margin-bottom: 18px;
  min-width: 100%;
}

.trip-main{
  max-width: 40%;
}

.trip-aside{
  max-width: 60%;
}

.trip-img{
  width: 125px;
  height: 168px;
  border-radius: 5px;

}

.trip-location{
  font-weight: 400;
  font-size: 10.24px;
  line-height: 12px;
  letter-spacing: 0.17em;
  color: #2B283A;
  margin-bottom: 7px;
}

.trip-title{
  font-weight: 700;
  font-size: 25px;
  line-height: 30px;

  color: #2B283A;

  margin-bottom: 7px;
  padding-bottom: 10px;
}

.trip-dates{
  font-weight: 700;
  font-size: 10.24px;
  line-height: 12px;
  margin-bottom: 10px;

  color: #2B283A;  
}
.trip-google-maps{

  font-weight: 400;
  font-size: 10.24px;
  line-height: 12px;
  /* identical to box height */
  text-decoration-line: underline;
  color: #918E9B;

}
.trip-description{
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-size: 10.24px;
  line-height: 150%;
  /* or 15px */

  color: #2B283A;
    
}

Answer 1

我们先回答你的第二个问题。

For some reason the trip-div is not expanding 100% to the right. It must be something related to max-width but I can't understand it.

#root div 的最大宽度为 600px，它向下层叠并影响其下的所有子组件。

现在讨论更复杂的问题。

Adding a line break after each trip-div. I thought I could do so on the ".map" cycle but it breaks. How should I approach it?

您只能从 map 中返回 1 个元素，但您正在尝试返回 2 - 1 和 1

---

。

有几种方法可以解决这个问题。 更明显的一个 - 将它们包裹在 <div> 中

const trips = data.map(trip=>{
  return (<div>
    <Trip item={trip} />
    <hr>
  </div>)
})

更好的解决方案是使用 React Fragment

const trips = data.map(trip=>{
  return (<React.Fragment>
    <Trip item={trip} />
    <hr>
  </React.Fragment>)
})

这样您就不需要渲染额外的 DOM 元素。