0

これらの 2 つの列を整列させる最善の方法は何でしょうか - .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;
}
4

2 に答える 2

0

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

お役に立てば幸いです。

于 2012-06-01T05:57:07.437 に答える
-2

CSSで、.responseNumクラスと.responseTextクラスの親のdisplay-optionを選択します。したがって、親クラス'textMessageResponse'の下にcssを入力します。display：inline; または表示：インラインブロック; divまたはdisplayの水平方向の配置：ブロック; divの垂直方向の配置用。

于 2012-06-01T05:40:29.603 に答える