0

HTML

<!--start of steps-->  
    <div id="stepscontainer">
    <div class="step">
    <p>STEP 1</p>
    <p style="font-size:12px;">SHARE US WITH YOUR FRIENDS</p>
    </div>

    <div class="step">
    <p>STEP 2</p>
    <p style="font-size:12px;">COMPLETE A SHORT OFFER</p>
    </div>

    <div class="step">
    <p>STEP 3</p>
    <p style="font-size:12px;">ENJOY YOUR FREE RUNESCAPE MEMBERSHIP</p>
    </div>
    </div>
    <!--end of steps-->

CSS

.step{
    width:250px;
    height:200px;
    background-color:#FFF;
    color:#121001;
    display:inline-block;
    padding-right:20px;
    margin-right:10px;
    margin-left:10px;
    }
.step p{
    font-size:30px;

    }   
#stepscontainer{
    height:200px;
    width:900px;
    position:relative;
    top:-610px;
    text-align:center;
    }

行のブロックが 2 つあるため、ステップでは少し上に移動します。複数行のテキストがある場合でも、それらを揃える方法はありますか?

4

2 に答える 2

1

「テキストが複数行ある場合でも、それらを整列させる方法はありますか?」

クラスvertical-align: bottom;への追加は 1 つの方法です。.step

.step{
width:250px;
height:200px;
background-color:#FFF;
color:#121001;
display:inline-block;
padding-right:20px;
margin-right:10px;
margin-left:10px;
vertical-align: bottom;
}

http://jsfiddle.net/jTD8q/

于 2013-06-01T19:08:31.050 に答える
0 
.step{
   vertical-align: top;
}

そのため、コンテンツに関係なく、すべてが上に配置されます。

ライブデモ

于 2013-06-01T19:08:42.520 に答える