Html 什么时候很多div会变成一个麻烦？

我正在努力做到这一点

在我看来，我很想这样做的方式如下

但这是大量的div和css

  <div class="route-information-container">
    <div class="route-information-container__header">
        <div class="route-information-container__name">DRONE ID ID </div>
        <div class="route-information-container__battery"><mat-icon svgIcon="battery-90"></mat-icon></div>
    </div>
    <div class="route-information-container__drone-info">
      <img  class="route-information-container__drone-logo" src="./assets/images/drones/drone_front.jpg" />
      <div class="route-information-container__drone-name">DroneID</div>
      <div class="route-information-container__drone-camera">CameraID</div>
    </div>
  </div>

---

我的大多数HTML结构都与此类似。我倾向于把盒子放在任何地方，我想知道，这是一种不好的做法吗？另一种方法是什么

您的结构没有错误，永远不会有问题。 但是您可以使用css选择器在html标记中创建干净的结构。 例如，您可以在css文件中使用：

.route-information-container div:first-child {text-decoration: underline;}
.route-information-container div:last-child {color: red;}

---

按照标准惯例，结构是完美的。 您还可以使用以下代码实现上述结构：

---

与此相比，使用CSS类将更受欢迎，因为这依赖于HTML结构不变。

 <div class="route-information-container__header">
  <div class="route-information-container__name">DRONE ID ID </div>
  <div class="route-information-container__battery">
    <mat-icon svgIcon="<battery-></battery->90">Right Section</mat-icon>
  </div>
</div>
<img  class="route-information-container__drone-logo" src="./assets/images/drones/drone_front.jpg" width="50px"/>
<div class= "bottom-section">
  <div class="route-information-container__drone-name">DroneID</div>
  <div class="route-information-container__drone-camera">CameraID</div>
</div>   


.route-information-container__header {
  display: flex;
  border: 1px solid black;
  justify-content: space-between;
}

.bottom-section {
  display: inline-block;
  vertical-align: top;
}