图像在 HTML 中对齐答案

【问题标题】：Images align in HTML图像在 HTML 中对齐
【发布时间】：2016-07-14 01:46:36
【问题描述】：

我正在创建一个网站，并希望得到一些帮助来像这样对齐我的图像

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

    <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）

【问题讨论】：

制作一个带有隐藏边框的表格。那么，您是想学习 html 还是打算创建一个网站？由于屏幕较小等原因，Bootstrap 绝对是后者的方式，但对于前者来说，在 html 中做一个表格是方式。
其实在428+221+221+428≈1200。你打算把它作为 % 在哪里？如果您不希望您的图像被压扁，您可以省略高度。然后将宽度转换为 %。

标签： html css image twitter-bootstrap alignment

【解决方案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>

【讨论】：

【解决方案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 :)

【讨论】：