Div对齐和形状

Question

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

num列也有背景 - ＆gt;我能用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*/
}​​

我希望它会对你有所帮助。

Answer 2

CSS中的

选择.responseNum＆amp;的父级的display-option。 .responseText类。因此，在父类'textMessageResponse'下键入css： 显示：内联;或显示：inline-block;用于水平对齐你的div或 显示：块;用于div的垂直对齐。