Question

我有三个inline-block div这样：

<div style="display:inline-block">div1</div>
<div style="display:inline-block; padding-top:5px">div2</div>
<div style="display:inline-block">div3</div>

我在第二个div中添加了一个填充，以显示它稍微低一点，但这也使得其他div也会下降。如何只使第二个div显示更低？

这是一个JSFiddle：http://jsfiddle.net/mY6hP/

同样的事情被问到here，但接受的答案建议使用absolute定位，我不想这样做。

Answer 1

更改其他div上的对齐方式，使它们在顶部对齐（通过vertical-align:top;）：

<div style="display:inline-block; vertical-align:top;">div1</div>
<div style="display:inline-block; padding-top:5px">div2</div>
<div style="display:inline-block; vertical-align:top;">div3</div>

Answer 2

尝试使用float：left而不是内联块显示：

<div style="float:left">div1</div>
<div style="float:left; padding-top:5px">div2</div>
<div>div3</div>

一个div中的填充会影响其他div

2 个答案: