<main> <div id="right"> <div id="line1"> <div class="box"> <img src="xmad_14950995035103_fhWtH.jpg"width="200px"> <p>红红火火恍恍惚惚或</p> <p class="p1">哈哈哈哈哈或</p> <p class="p2">我问问</p> </div> <div id="line2"> <div class="box"> <img src="pms_1487831386.1667404!220x220.jpg" width="200px"> <p>红红火火恍恍惚惚或</p> <p class="p1">哈哈哈哈哈或</p> <p class="p2">我问问</p> <div id="right"> <div id="line3"> <div class="box"> <img src="pms_1494490988.2099047!220x220.jpg" width="200px"> <p>红红火火恍恍惚惚或</p> <p class="p1">哈哈哈哈哈或</p> <p class="p2">我问问</p> </div> <div id="line4"> <div class="box"> <img src="xmad_14927605434196_fmGSl.png"width="200px"> <p>红红火火恍恍惚惚或</p> <p class="p1">哈哈哈哈哈或</p> <p class="p2">我问问</p> </div> <div id="right"> 怎么把一下前端开发代码用css代码排成一排四张照片

可以使用以下 CSS 代码实现：

#right {
  display: flex;
  flex-wrap: wrap;
}

.box {
  width: 200px;
  margin: 10px;
  text-align: center;
}

.box img {
  width: 100%;
}

.box p {
  margin: 5px 0;
}

然后在 HTML 中按照以下结构排列即可：

<main>
  <div id="right">
    <div class="box">
      <img src="xmad_14950995035103_fhWtH.jpg">
      <p>红红火火恍恍惚惚或</p>
      <p class="p1">哈哈哈哈哈或</p>
      <p class="p2">我问问</p>
    </div>
    <div class="box">
      <img src="pms_1487831386.1667404!220x220.jpg">
      <p>红红火火恍恍惚惚或</p>
      <p class="p1">哈哈哈哈哈或</p>
      <p class="p2">我问问</p>
    </div>
    <div class="box">
      <img src="pms_1494490988.2099047!220x220.jpg">
      <p>红红火火恍恍惚惚或</p>
      <p class="p1">哈哈哈哈哈或</p>
      <p class="p2">我问问</p>
    </div>
    <div class="box">
      <img src="xmad_14927605434196_fmGSl.png">
      <p>红红火火恍恍惚惚或</p>
      <p class="p1">哈哈哈哈哈或</p>
      <p class="p2">我问问</p>
    </div>
  </div>
</main>