图像以HTML格式对齐

Question

我正在创建一个网站，想要帮助我调整像这样的图像

这是我的代码，但我没有得到理想的结果

    <img height="632" width="428" src="img/default.png" class="pull-left">

            <div>
                <img height="318" width="221" src="img/default.png">

                <img height="318" width="221" src="img/default.png">



                <img height="318" width="221" src="img/default.png">

                <img height="318" width="221" src="img/default.png">
            </div> <img height="632" width="428" src="img/default.png" class="pull-right">

不要怪我，我是初学者：p并感谢你的帮助（我可以使用Bootstrap）

Answer 1

尝试此操作并将图像插入单元格中：

    <table border="1"> 
    <!--First row -->
    <tr> 
    <td rowspan="2" width="428" height="632"> 632*428 </td>
    <td width="221" height="318"> 318*221 </td>
    <td width="221" height="318"> 318*221 </td>
    <td rowspan="2" width="428" height="632"> 632*428 </td>
    </tr>
    <!--Second row -->
    <tr>
    <td width="221" height="318"> 318*221 </td>
    <td width="221" height="318"> 318*221 </td>
    </tr> 
    </table>

Answer 2

我的建议是使用以下DOM：

 <div style="display:flex">
   <img height="632" width="221" src="img/default.png">
    <div>
      <div><img height="318" width="221" src="img/default.png"></div>
      <div><img height="318" width="221" src="img/default.png"></div>
   </div>
   <div>
     <div><img height="318" width="221" src="img/default.png"></div>
     <div><img height="318" width="221" src="img/default.png"></div>
   </div>
  <img height="632" width="221" src="img/default.png">
</div>

另外我为你创建了一个JSFiddle：）