html - Div 对齐和形状

Question

对齐这两列的最佳方式是什么 - .responseNum & .responseText:

num 列也有背景 -> 由于无法获得正确的图像比例，我能否使用 CSS3 制作此形状？

HTML:

<div class="textMessageResponse">
    <div class="responseNum">
        <span class="number">1</span>
    </div>
    <div class="responseText">
        <p>Not bad morbi no bad luke crying twitter le me sit superhero cellphone. Strangers silent hill party problem? Loki cereal guy gentlemen monocle high school lose trolololo men true story. On freddie mercury asian le girlfriend happy facepalm blizzard bart. Charlie Sheen bacon search pokeman unsave i see what you did there vegan cookie monster humor final week.</p>
    </div>
</div>

CSS:

.textMessageResponse{
    height:60px;
    background-color:#fff;
    margin:10px;
}
.textMessageResponse .responseNum .responseText{
    float:left;
    display:inline-block;
}

.textMessageResponse .responseNum{
    width:35px;
    height:35px;
}

.textMessageResponse .responseNum .number{
    background:url('../images/numBG.png') no-repeat;
    width:25px;
    height:25px;
    color:#fff;
    text-align:center;
    font-weight:bold;
}

Answer 1

像这样改变你的CSS，

.textMessageResponse{
    height:60px;
    background-color:#fff;
    margin:10px;
}
.textMessageResponse .responseNum, .textMessageResponse .responseText{/*change*/
    float:left;
}

.textMessageResponse .responseText{
    width:300px;/*Add this*/
}

.textMessageResponse .responseNum{
    width:35px;
    height:35px;
}

.textMessageResponse .responseNum .number{
    background:url('http://jzm.co.nz/clients/dev/_assets/images/numBG.png') no-repeat;
    width:25px;
    height:25px;
    color:#fff;
    text-align:center;
    font-weight:bold;
    display:block; /*change*/
}​​

希望对您有所帮助。