inline-table容器内部分table-cell元素换行，如何实现同行排列？

问题根源 #

1. div宽高设置无效：你给最后两个div用的是HTML原生width="150"属性，但对于设置了display:table-cell的元素，HTML宽高属性不生效。这些div会自动分配父容器的剩余宽度，导致总宽度超出父容器可用空间，触发换行。
2. table-cell不支持margin：第一个img设置的margin-left:20px无效，table-cell元素不支持margin属性，这个左侧间距没按预期生效，还干扰了布局宽度计算。
3. 宽度总和超限：即使给所有元素设置150px的CSS宽度，加上你想要的20px左侧间距，总宽度（20 + 150*5 + 4）=774px，已经超过父容器设置的700px宽度，这是换行的核心原因。

修复方案（二选一） #

方案一：调整父容器宽度容纳所有元素

把父容器宽度设为足够容纳所有元素的尺寸，同时修正元素的宽高设置和间距实现：

<div style="background-color:rgb(81, 205, 50); display:table; width:774px; height:150px; border: 2px solid black; padding: 2px;">
      <img src="../rail_logo.png" style="width:150px; height:150px; padding-left:20px; display:table-cell; border:1px solid black;">
      <img src="../indian-railways.jpg" style="width:150px; height:150px; display:table-cell; border:1px solid black;">
      <img src="../pm-railway.jpg" style="width:150px; height:150px; display:table-cell; border:1px solid black;">
      <div style="width:150px; height:150px; display:table-cell; border:1px solid black;"></div>
      <div style="width:150px; height:150px; display:table-cell; border:1px solid black;"></div>
</div>

方案二：缩小元素宽度适配父容器

如果要保留父容器700px的宽度，计算每个元素的最大可用宽度（(700-4-20)/5=135.2px），设置固定宽度：

<div style="background-color:rgb(81, 205, 50); display:table; width:700px; height:150px; border: 2px solid black; padding: 2px;">
      <img src="../rail_logo.png" style="width:135px; height:150px; padding-left:20px; display:table-cell; border:1px solid black;">
      <img src="../indian-railways.jpg" style="width:135px; height:150px; display:table-cell; border:1px solid black;">
      <img src="../pm-railway.jpg" style="width:135px; height:150px; display:table-cell; border:1px solid black;">
      <div style="width:135px; height:150px; display:table-cell; border:1px solid black;"></div>
      <div style="width:135px; height:150px; display:table-cell; border:1px solid black;"></div>
</div>

关键修改说明 #

• 所有元素的宽高都通过CSS的width/height属性设置，替代无效的HTML原生属性，确保table-cell元素尺寸固定。
• 用padding-left替代margin-left实现第一个元素的左侧间距，因为table-cell支持padding属性。
• 父容器改用display:table（若不需要行内特性），布局更稳定；如果需要保持行内，可以保留display:inline-table。

内容的提问来源于stack exchange，提问作者user19975973