事業部對齊和形狀

什麼是對齊這兩列的最佳方式 - .responseNum & .responseText：事業部對齊和形狀

另外，NUM列有一個背景 - >我是否能做到這一點形狀，CSS3，因爲我無法獲得圖像比例是否正確？

enter image description here

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

來源

2012-06-01 Jess McKenzie

你想如何對齊這些列？你是否希望這種背景重複，或延伸，或只發生一次？請對你的問題更具體。 – Nightfirecat

發佈您的CSS也或jsfiddle更好。 – Sam

@Sam我忘記了 –

-2

在CSS選擇適合您.responseNum & .responseText類的父類的顯示選項。因此，在父類'textMessageResponse'下鍵入css： display：inline;或顯示：inline-block;用於水平對齊div或 display：block;垂直對齊你的div。

來源

2012-06-01 05:40:29 Hobby99

改變你的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-01 05:57:07 Sam

事業部對齊和形狀

回答

相關問題