HTML，CSS如何将列表放在一组图像旁边？

Question

所以我必须在我写的代码中写下这些图像旁边的列表：

<div class="asideContent">
    <ul> 
        <li>  <p> </p> </li> 
        <li>  <p></p> </li>          
        <li>  <p>  </p> </li> 
    </ul>
    <div class = "imageAside">
        <img class=""src=img/Dedede.jpg alt="">
    </div>
    <div class = "imageAside">
        <img class=""src=img/tournament.jpg alt="">
    </div>
    <div class = "imageAside">
        <img class=""src=img/Secret.jpg alt="">   
    </div>

</div>    

我遇到的最大问题是，图像上方或下方的列表。我需要它坚持到右边。在CSS中使用float看起来效果不佳。

Answer 1

你可以使用flex和margin-left，不要使用float总是让它更复杂。试试这个：

.container {
  display: flex;
}
.asideContent {
 display: flex;
 margin-left: auto;
}

.asideImage {
  margin-left: auto;
}

<div class="container">
  <div class="asideContent">
    <ul> 
        <li>  <p> hey </p> </li> 
        <li>  <p> hey !</p> </li>          
        <li>  <p>  hey 3</p> </li> 
    </ul>
    <div class="asideImage">
        <div class = "imageAside">
          <img class=""src=img/Dedede.jpg alt="">
        </div>
        <div class = "imageAside">
            <img class=""src=img/tournament.jpg alt="">
        </div>
        <div class = "imageAside">
            <img class=""src=img/Secret.jpg alt="">   
        </div>
    </div>
  </div>
</div>

您还可以使用flex和margin auto来包含更多元素。

Answer 2

尝试使用float: left图像：

.imagesAside {
  float: left;
}

<div class="asideContent">
  <div class="imagesAside">
      <div class = "imageAside">
          <img class=""src=img/Dedede.jpg alt="">
      </div>
      <div class = "imageAside">
          <img class=""src=img/tournament.jpg alt="">
      </div>
      <div class = "imageAside">
          <img class=""src=img/Secret.jpg alt="">   
      </div>
    </div>
    <ul> 
        <li>  <p>h</p> </li> 
        <li>  <p>h</p> </li>          
        <li>  <p>h</p> </li> 
    </ul>
</div>