HTML/CSS布局咨询：如何实现右侧文本下方的标题排版

Hey there! No need to apologize at all—CSS layout can be tricky when you're getting started, and we've all been there 😊 Let's get your card layout sorted so the title (like "Mount Fuji") sits properly below the right-side text.

What's Causing the Issue? #

Right now, you're using float to position elements, which makes it hard to get the title to wrap below the right-side content. Floats can create unexpected layout behavior, especially when you want elements to stack vertically within a section. Flexbox is a much better tool for this kind of structured layout.

Here's the Fixed Code #

Updated HTML (note the corrected className and moved title):

<div className="card"> 
  <img className="card--image" src={prop.item.image} width={150} /> 
  <div className="card--content">
    <div className="card--header"> 
      <img className="card--marker" src="https://media.istockphoto.com/vectors/location-icon-vector-pin-sign-isolated-on-white-background-navigation-vector-id1148705812?k=20&m=1148705812&s=612x612&w=0&h=dbYgYcjgXCfB72741foF1cH3Y3Nj2Oe8GmyM-1YxWEM=" width={16}/> 
      <p>{prop.item.location}</p> 
      <p className="card--map"><a href={prop.item.URL}>View on Google Maps</a></p> 
    </div> 
    <p className="card--title">{prop.item.title}</p> 
  </div>
</div>

Updated CSS (using Flexbox for clean layout):

.card {
  display: flex; /* Use flex to arrange image and content side by side */
  gap: 20px; /* Space between image and right content */
  margin-top: 75px;
  margin-left: 200px;
  background-color: aqua;
  align-items: flex-start; /* Align top of image and content */
}

.card--content {
  display: flex;
  flex-direction: column; /* Stack header and title vertically */
  gap: 10px; /* Space between header and title */
}

.card--header {
  display: flex; /* Arrange marker, location, map link horizontally */
  align-items: center;
  gap: 8px; /* Space between each element in the header */
  font-weight: normal;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.card--header > p {
  margin: 0;
  font-size: 13px;
}

.card--map {
  padding-left: 20px;
  color: #918E9B;
}

.card--title {
  font-weight: bold;
  letter-spacing: 0.02em;
  margin: 0;
}

Key Changes Explained: #

• Added a card--content container: This wraps both the header and title, so they stack vertically on the right side of the image.
• Replaced floats with Flexbox: Flexbox gives us precise control over element alignment and spacing without the quirks of floats.
• Fixed the classname typo: Changed classname to className (required for React components).
• Adjusted margins and gaps: Used gap instead of manual margins for consistent spacing between elements.

Now your title will sit neatly below the location text and map link on the right side of the image!

内容的提问来源于stack exchange，提问作者carlos