0

したがって、同じ行に2つのDIV要素があります。しかし、2番目のコンテンツにコンテンツを配置すると、最初のコンテンツがダウンします。これがコードとその結果です。

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

2 に答える 2

2

構文に誤りがあるためです

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

「Top5NúmerosEscolhidos」の後に閉じたことのない開始Pタグがあります

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

それを取り除いてください、そうすればあなたは行ってもいいでしょう！

http://jsfiddle.net/S636H/

編集：

divにテキスト以上のものを入れたいですか？両方のdivを左側にフロートさせ、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をフロートさせたくない場合は、pタグがインラインであることを確認してください：http： //jsfiddle.net/CkGJf/

于 2013-03-13T17:41:29.283 に答える
0

あなたがやろうとしていることの本質は次のとおりです。

<div class="parentPanel">
    <div class="boxyPanel">The Left Div</div>
    <div class="boxyPanel">The Right Div</div>
</div>

そして、スタイリングを行うためのCSSは次のとおりです。

.parentPanel {
background-color: #f0f0f0;
overflow: auto;
text-align: center;    
}
.boxyPanel {
display: inline-block;
width: 250px;
height: 150px;
border: 1px solid blue;
}

フィドルを参照してください：http：//jsfiddle.net/audetwebdesign/GVgun/

于 2013-03-13T17:42:00.430 に答える