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*/
}​​

我希望它会帮助你。

Answer 2

在 CSS 中为 .responseNum 和 .responseText 类的父级选择显示选项。因此，在父类 'textMessageResponse' 下输入 css： display: inline; 或显示：内联块；用于 div 或显示的水平对齐：块；用于垂直对齐 div。