已关闭。此问题需要更多focused。目前不接受回答。
**要改进此问题吗？**更新此问题，使其仅针对editing this post的一个问题。

5天前关闭。
Improve this question的
我创建了一个包含多个div的页面结构，但我很难实现所需的对齐方式。我想水平对齐某些div，而其他div应该垂直对齐。我尝试了多种方法，但我似乎永远无法得到我想要的，而且我没有足够的经验知道该怎么做.我将感谢您的帮助！
以下是我尝试的方法（我是编码新手，所以我知道这可能不是最有效的方法）：

超文本标记语言

<div class="center-container">
<div class= "projet">
<div id="mydiv">
<div id="mydivheader">ashsrollers.gif
<img src="./ressources/images/bar.png" alt="gummo">
</div>
                
<img src="./ressources/images/ashgif.gif" alt="gummo">

</div>
</div>
<br>
<div class="descprojet">

ASH'S WORLD est le petit univers électrique d'Ashleigh Kane, une joyeuse gamine de (bientôt, presque, elle compte les jours) 10 ans. Parce que chaque jour est une aventure, et au pays d'ASH, elles sont toujours vibrantes.Projet inspiré d'un mix entre l'esthétique du web des années 2000 et les classiques de jeux vidéos rétros, c'est par le biais du pixel art que s'incarne l'univers d'ASH, au sein de cette planche de stickers émulant ce qu'elle serait, en tant que personnage de webcomic possédant son propre cartoon, jeu vidéo, ou autre.
</div>

<div class= "projet">
<div id="mydiv">
<div id="mydivheader">ashsworld.png
</div>
                
<img src="./ressources/images/ashplanche.png" alt="gummo">

</div>
</div>
<div class= "projet">
<div id="mydiv">
<div id="mydivheader">ashsds.png
</div>

<img src="./ressources/images/3DS.png" alt="gummo">

</div>
</div>

<div class= "projet">
<div id="mydiv">
<div id="mydivheader">ashsmag.png
</div>

<img src="./ressources/images/ashmag2.png" alt="gummo">

</div>
</div>

</div>

字符串

CSS

.projeticon img {
  max-width: 10%;
  display: flex;

  /* float: right; */
}

.projeticon {
  font-family: "FT88-Regular";
  background-color: blue;

}

.projettitre {
  margin-bottom: 100px;

}

.projet {
  padding: 2em;
}

#mydiv {
  z-index: 9;
  background-color: black;
  display: inline-block;
  top: 10px;
  float: left;
  margin-bottom: 6em;
  border: 1px solid #00ff33;

  box-sizing: border-box; /* Cela garantit que la taille totale inclut la bordure et le padding */
  overflow: hidden; /* Cela assure que le contenu débordant est masqué plutôt que visible à l'extérieur de la div */
}

#mydiv img {
  width: 100%; /* Ajustez la valeur en fonction de vos besoins */
  height: auto; /* pour maintenir les proportions de l'image */
  display: block; /* pour éviter l'espace supplémentaire sous l'image */
}

#mydivheader {
  padding: 10px;
  display: flex;
  z-index: 10;
  font-family: "FT88-Regular";
  background-color: black;
  text-align: left;
  color: #fff;
  justify-content: space-between; /* Pour répartir l'espace entre les éléments enfants */
 align-items: center; /* Pour aligner verticalement les éléments enfants */
}

#mydivheader img {
  width: 10%;
  margin-left: auto; /* Aligner l'image à droite */
   margin-right: 0; /* Assurez-vous que la marge à droite est également à zéro */
}

型
I posted an image comparing my result on the left, VS the sketch of the layout that I'm trying to achieve on the right. I hope that's clear enough !的