HTML与Bootstrap编写的Div子元素未正常显示问题咨询

Hey there! I see exactly what's tripping up your layout—those floated elements are causing container collapse. Let's break down the problem and fix it step by step.

What's Going Wrong? #

When you apply float: left to the image and float: right to the link, those elements get pulled out of the normal document flow. The parent container (the one with the green border) can't calculate its height based on floated children, so it collapses to a tiny size. That makes it look like your image and link aren't sitting inside the container at all.

Easy Fixes (Using Bootstrap & Plain CSS) #

1. Use Bootstrap's Built-in clearfix Class

Since you're already using Bootstrap, the simplest fix is to add the clearfix utility class to your parent container. This tells the container to account for its floated children:

<div class="container clearfix" align="center" style="width: 40%; border: 2px solid #00CC11">
  <img src="./images/rectsimg.png" alt="Rects-Fight" style="float: left; width: 50%">
  <a href="./python/rects-fight.html" style="float: right; padding-right: 12%"> Rects Fight! </a>
</div>

2. Manually Clear Floats (No Bootstrap Dependency)

If you want a plain CSS solution, add a pseudo-element to the parent container to clear floats. Drop this into your stylesheet:

.clear-floats::after {
  content: "";
  display: table;
  clear: both;
}

Then attach the clear-floats class to your parent container:

<div class="container clear-floats" align="center" style="width: 40%; border: 2px solid #00CC11">
  <img src="./images/rectsimg.png" alt="Rects-Fight" style="float: left; width: 50%">
  <a href="./python/rects-fight.html" style="float: right; padding-right: 12%"> Rects Fight! </a>
</div>

3. Use Bootstrap's Grid System (Best Practice)

Instead of relying on floats, use Bootstrap's grid layout—it's built for this kind of alignment and keeps your code consistent with the framework's conventions:

<div class="container" align="center">
  <h3 class="column" style="padding: 30px"> My Projects </h3>
  <div class="container" align="center" style="width: 40%; border: 2px solid #00CC11">
    <div class="row align-items-center">
      <div class="col-6">
        <img src="./images/rectsimg.png" alt="Rects-Fight" style="width: 100%">
      </div>
      <div class="col-6 text-end">
        <a href="./python/rects-fight.html"> Rects Fight! </a>
      </div>
    </div>
  </div>
</div>

This uses row and col to split the space evenly, align-items-center to vertically center the link with the image, and text-end to right-align the link—no floats required!

Quick Tips #

• Try to avoid inline attributes like align="center" when possible; Bootstrap has utility classes like text-center that play nicer with the framework.
• Floats have their uses, but Bootstrap's flex/grid system is more reliable for modern, responsive layouts.

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