Question

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

在步骤中它会向上移动一点，因为有两个线块，即使有多行文本，有没有办法让它们保持对齐？

Answer 1

“即使有多行文字，有没有办法让它们保持对齐？”

将vertical-align: bottom;添加到.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/

Answer 2

.step{
   vertical-align: top;
}

所以尽管它们的内容如此，但所有这些都在最顶层。

Live DEMO

当我输入内容时，我的班级会向上移动

2 个答案: