如何用CSS调整卡片内元素位置？Bootstrap3卡片布局问题求助

Hey there! I see you're trying to tuck that .details section into the top right corner next to your card image—let's fix that up. The main issue with your current code is that the layout structure isn't set up to let the image and details sit side-by-side; right now they're just stacking in the normal document flow.

Here's what we'll adjust: #

1. Restructure the HTML to group the image and .details into a single container, so we can control their horizontal placement.
2. Update the CSS to use flexbox properly, since it's perfect for this kind of positioning task.

Modified HTML Code #

<div class="row">
  <div class="card col-lg-4 col-md-6">
    <div class="front">
      <!-- New wrapper to hold image and details side-by-side -->
      <div class="image-details-wrapper">
        <img class="girlimg" src="girl.jpg" alt="Guided hiking tour" />
        <div class="details">
          <div class="duration">
            <i class="fas fa-clock"></i> Duration
          </div>
          <div class="people">
            <i class="fas fa-user-friends"></i><br />
            <p>Max adults:10</p>
          </div>
          <div class="kids">
            <i class="fas fa-child"></i><br />
            <p>Max children:3</p>
          </div>
        </div>
      </div>
      <h2 class="activname">Guided hiking tours</h2>
      <button class="activbutt" type="button" name="button"> SEE DETAILS </button>
    </div>
  </div>
</div>
<br />

Modified CSS Code #

.front {
  width: 475px;
  height: 475px;
  background-color: #F7F4F2;
  /* Turn .front into a flex container to stack its children vertically */
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 20%;
  padding: 1rem; /* Add some padding to prevent content from touching edges */
}

/* Wrapper for image and details - makes them sit side-by-side */
.image-details-wrapper {
  display: flex;
  justify-content: space-between;
  width: 100%; /* Take full width of the card */
  margin-bottom: 1rem; /* Add space below the image/details section */
}

.girlimg {
  max-width: 60%;
  max-height: 100%;
}

.details {
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Align details to the top of the wrapper */
  align-items: flex-end; /* Align text/icons to the right */
  gap: 0.5rem; /* Add space between detail items */
}

.activname {
  margin: 1rem 0; /* Simplify margin for better spacing */
  text-align: center;
}

.activbutt {
  background-color: #ffcc66;
  border-radius: 2%;
  font-size: 30px;
  padding: 0.5rem 1rem; /* Add padding for better button size */
  border: none; /* Remove default border */
  cursor: pointer;
}

Key Changes Explained: #

• image-details-wrapper: This container uses display: flex and justify-content: space-between to push the image to the left and .details to the right, keeping them side-by-side.
• .front: We added display: flex and flex-direction: column so all the card content (image/details, title, button) stacks vertically, with proper alignment.
• .details: Updated justify-content: flex-start to align the detail items to the top of the right side, and align-items: flex-end to keep the text/icons right-aligned for that corner look.
• Minor tweaks: Added padding and margins to make the card look cleaner and prevent content from being cramped.

This should get your .details section sitting neatly in the top right corner next to the image, just like you wanted!

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