所以,我在同一行中有2个DIV元素。但是当我把内容放在第二个上面时,第一个内容会下降。这是代码及其结果。
<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>
答案 0 :(得分: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>
你有一个开放的P标签,你在“Top5NúmerosEscolhidos”之后永远不会关闭
Top 5 Números Escolhidos<p>
1º -
删除它,你会很高兴去!
修改强>
想要在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>
或者,如果你不想浮动div,请确保p标签是内联的: http://jsfiddle.net/CkGJf/
答案 1 :(得分: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;
}