display:inline-block 속성으로 글자수만큼 늘어나고 다음행으로 위치할때..
ChocoHoilc
해당 css
.benefits_follow03 p {color:#fff; font-size:16px; padding:15px 20px; margin-top:1px; display:inline;}
.benefits_follow03 p.bakcol1 {background:#7f3097;}
.benefits_follow03 p.bakcol2 {background:#421250;}
마크업
div class=benefits_follow03
h4 class=mgb20Benefits/h4
p class=bakcol1Accommodation/p
p class=bakcol1Co-scholar/p
p class=bakcol1Entrance and exit allowances/p
p class=bakcol2Medical insurance coverage/p
p class=bakcol1Monthly stipend/p
p class=bakcol2Field trips/p
p class=bakcol1One-month orientation/p
p class=bakcol1Settlement allowance/p
p class=bakcol1Scholarship certificate of completion/p
p class=bakcol2Vacation leave/p
/div
질문1
현재 display:inline- ... 속성때문에 다음행으로 가질 않고 옆으로 붙어 있습니다.
예를들면 p class=bakcol1Accommodation/pbr/ 이런식으로
강제 줄바꿈없이 자연스럽게 밑으로 내려오게 할 수 없을까요?
전제조건은 100%가 아니라 글자수만큼 자연스럽게 백그라운드가 늘어나야 한다는 것입니다.
미약한 지식에 도움을 청합니다. ㅠ.ㅠ
질문2
css만으로 방법이 없다면 마크업 구조를 바꿔야 하는지 질문드립니다.
ie7에서도 적용되어야 합니다.