css - 内联 HTML DIV

Question

因此，我在同一行中有 2 个 DIV 元素。但是当我把内容放在第二个上时，第一个就下降了。这是代码及其结果。

jsfiddle

<div style="margin-top: 5px;"></div>
<div style="display: inline-block; width:250px; height:180px; background-color:#fff; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);">
    <center>
        <div style="font-weight: bold; text-align: center; width: 250px; height: 50px; font-family: 'Droid Sans', sans-serif; color:#000; font-size:12px; border:0; height:100%; line-height: 30px;">Top 5 Números Ganhadores 1º -</div>
    </center>
</div>
<div style="display: inline-block; width:250px; height:180px; background-color:#fff; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);">
    <center>
        <div style="font-weight: bold; text-align: center; width: 250px; height: 50px; font-family: 'Droid Sans', sans-serif; color:#000; font-size:12px; border:0; height:100%; line-height: 30px;">Top 5 Números Escolhidos
            <p>1º -</div>
    </center>
</div>

Answer 1

这是因为你的语法有误

<div style="margin-top: 5px;"> </div>
<div style="display: inline-block; width:250px; height:180px; background-color:#fff; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);">
<center>
    <div style="font-weight: bold; text-align: center; width: 250px; height: 50px; font-family: 'Droid Sans', sans-serif; color:#000; font-size:12px; border:0; height:100%; line-height: 30px;">
        Top 5 Números Ganhadores
        1º -
    </div>
</center>
</div>
<div style="display: inline-block; width:250px; height:180px; background-color:#fff; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);">
<center>
    <div style="font-weight: bold; text-align: center; width: 250px; height: 50px; font-family: 'Droid Sans', sans-serif; color:#000; font-size:12px; border:0; height:100%; line-height: 30px;">
        Top 5 Números Escolhidos<p>
        1º - 
    </div>
</center>
</div>

您有一个在“Top 5 Números Escolhidos”之后从未关闭的起始 P 标签

Top 5 Números Escolhidos<p>
        1º - 

删除它，你就可以开始了!

http://jsfiddle.net/S636H/

编辑:

想要在 div 中放置的不仅仅是文本？只需将两个 div 都 float 到左侧，并确保关闭 p 标签。

<div style="margin-top: 5px;"> </div>
<div style="display: inline-block; width:250px; height:180px; background-color:#fff; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);">
<center>
    <div style="font-weight: bold; text-align: center; width: 250px; height: 50px; font-family: 'Droid Sans', sans-serif; color:#000; font-size:12px; border:0; height:100%; line-height: 30px; float:left;">
        Top 5 Números Ganhadores
        1º -
    </div>
</center>
</div>
<div style="display: inline-block; width:250px; height:180px; background-color:#fff; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);">
<center>
    <div style="font-weight: bold; text-align: center; width: 250px; height: 50px; font-family: 'Droid Sans', sans-serif; color:#000; font-size:12px; border:0; height:100%; line-height: 30px; float:left;">
        Top 5 Números Escolhidos<p></p>
        1º - 
    </div>
</center>
</div>

http://jsfiddle.net/48wAA/

或者，如果您不想让 div float ，请确保 p 标签是内联的: http://jsfiddle.net/CkGJf/