事业部对齐和形状

什么是对齐这两列的最佳方式 - .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

事业部对齐和形状

回答

相关问题