图片左对齐不影响下一个div

Question

我正在尝试制作一个关于斗兽场的信息网站，其中包含用于显示/隐藏文本的按钮。我放了一些带有 align=left 的图像，所以信息就在它旁边，但是图像后面的按钮被重新对齐了。这是它目前的样子： image

这是一些html：

    <div>
  <div class="buttons">
    <div class="murmillo" onclick="changeGladiator('Murmillo')">
      Murmillo
    </div>
    <div class="retiarus" onclick="changeGladiator('Retiarus')">
      Retiarus
    </div>
    <div class="secutor" onclick="changeGladiator('Secutor')">
      Secutor
    </div>
  </div>
  <span id="gladiatorTitle"></span>:
  <div id="gladiatorDescriptions">

    <ul id="murmillo">
      <p>
        <img align="left" src="images/Murmillo.jpg" width="245px" />
        A murmillo typically wears a metal helmet with a stylized fish on the crest, a rectangular shield (scutum),
        and a short sword (gladius). The armor worn by a murmillo is designed to protect the head, torso, and legs,
        and it is made of metal or leather. The murmillo is one of the most popular types of gladiators in ancient
        Rome, and they are often pitted against other types of gladiators, such as the retiarius or secutor.
      </p>
    </ul>
    <ul id="retiarus">
      <p>
        <img align="left" src="images/Retiarius.jpg" width="245px" />
        A retiarius fights using a net, trident, and a small sword called a pugio. Retiarii are often pitted against
        secutores, who are armed with a sword and a shield. The retiarius is lightly armed and wears little armor,
        so they rely on their speed and agility to evade their opponents. Retiarii are also known for their
        distinctive outfits, which include a tunic, a loincloth, and a fish-shaped helmet.
      </p>
    </ul>
    <ul id="secutor">
      <p>
        <img align="left" src="images/secutor.jpg" width="245px" />
        Secutors are heavily armed and trained to fight other gladiators, typically a murmillo or a retiarius. Their
        armor and weaponry are designed to mimic those of a soldier, and they are known for their strong, muscular
        build. They are also characterized by their helmet, which has a narrow opening that limits their vision and
        makes them more reliant on their other senses. The secutor's helmet also has a crest that is shaped like a
        fish, which gives them their name (secutor is Latin for "pursuer").
      </p>
    </ul>
  </div>
</div>
<div>
  <div class="buttons">
    <div class="snacks" onclick="changeOther('Snacks')">
      Snacks
    </div>
    <div class="celebrities" onclick="changeOther('Celebrities')">
      Celebrities
    </div>
    <div class="other events" onclick="changeOther('Other Events')">
      Other Events
    </div>
  </div>
  <span id="otherTitle"></span>:
  <div id="otherDescriptions">
    <ul id="snacks">
      <li>Olives</li>
      <li> Fruits:
        <ul>
          <li>Figs</li>
          <li>Grapes</li>
          <li>Cherries</li>
          <li>Blackberries</li>
          <li>Peaches</li>
          <li>Plums</li>
          <li>Melons</li>
        </ul>
      </li>

      <li> Nuts:
        <ul>
          <li>Walnuts</li>
          <li>Hazelnuts</li>
          <li>Pine Nuts</li>
        </ul>
      </li>
    </ul>
    <ul id="celebrities">
      <li>Built during the reign of the Flavian emperors</li>
      <li>In construction under Emperor Vespasian's Reign</li>
      <li>Emperor Titus celebrated the opening day with 100 days of glagiatorial games</li>
      <li>Emperor Commodus performed in arena</li>
      
    </ul>
    <ul id="other events">
      <li>Dramas</li>
      <li>Reenactments</li>
      <li>Performances</li>
    </ul>
  </div>
</div>

和CSS：

html, body {
  height: 100%;
  width: 100%;
  margin: 0px;
  overflow: hidden;
  overflow-y: scroll;
  background: linear-gradient(125deg, #FFCA00 0%, #FFA000 100%);
}

.title {
  width: 100%;
  background-color: #000000;
  border-radius: 0 0 70px 70px;

  color: white;
  font-size: 5rem;
  text-align: center;
}

.body {
  margin: 50px 10%;
  font-family: Arial, Helvetica, sans-serif;
}

.buttons {
  display: flex;
  position: relative;
  right: 15px;
  column-gap: 31px;
  padding-bottom: 27px;
}

.buttons>* {
  cursor: pointer;
  background: black;
  width: auto;
  display: inline;
  border-radius: 50px 50px 50px 50px;
  padding: 10px;
  color: white;
}

img:not(.title>img){
  padding-right: 25px;
  border-radius: 20px 20px 20px 20px;
}

知道我能做什么吗？

Answer 1

像这样包装你的 div：

<div class="container">
   <div class="image-wrapper">
      <img src="" alt="">
   </div>
   <div class="text-wrapper">
      <p>Upper description text</p>
      <div class="buttons-description-wrapper">
         <!-- buttons with the description they are supposed to show -->
      </div>
   </div>
</div>

然后CSS会是这样的

.container {
   display:flex;
   flex-direction:column;
   /*use those for general layout*/
   /*use the following for some better positioning*/
   justify-content:center; /*to center it horizontaly*/
   align-items:flex-start /*to align items to the top within this container*/
}

/*setting height properties on wrappers might be needed, depends on how much text are goiing to be displaying*/

试试这个，让我知道。