2014-02-11 8 views
0

3 개의 스팬이 있습니다. 처음 두 개는 아이콘 (그림) 16x16 픽셀을 포함합니다. 세 번째 스팬에는 긴 텍스트가 포함됩니다. 문제는 텍스트가 너무 길면 두 번째 줄에도 나타나지만 줄의 시작 부분에 나타납니다. 첫 줄과 같은 위치에서 정렬되고 시작해야합니다. 이 3 개의 스팬은 어느 div로 감싸 질 수 없습니다. 이를 성취 할 수있는 가능성이 있습니까? 여기 그림을보고하는 샘플 페이지 spans examplehttp://jsfiddle.net/P76Sg/3가 서로 나란히 있습니다. 정렬

enter image description here

+1

당신은'디스플레이 넣을 수 있습니다 :은'span' 요소 테이블 cell'을 - [JSFiddle] (http://jsfiddle.net/P76Sg/1/) – Vucko

+0

어떻게 알 수 있습니까? 고마워. – user1554427

답변

2

당신은 당신이 플로트 오버 플로우 트릭을 사용하여 찾고있는 효과를 얻을 수 있습니다에게 있습니다. 자신의 <div> 안에있는 두 개의 아이콘을 포함하고 왼쪽으로 떠 있습니다. 그런 다음 텍스트 요소의 오버 플로우를 숨기고 항상 아이콘을 삭제하지만 가능한 폭의 나머지를 취합니다

HTML

<div class="cont"> 
    <div class="icons"> 
     <span><img /></span> 
     <span><img /></span> 
    </div> 
    <div class="text"> 
SSSScontent 3 content 3 content 3 content 3 content 3 content 3 dfssssss 
    </div> 
</div> 

CSS

.cont{width:280px} 
.icons{float:left} 
.text{background-color:red; overflow:hidden} 

JSFiddle


또는 다른 접근을하고 스팬이 테이블 셀로 표시가 : 테이블 셀 : * Vucko * 제안

JSFiddle

0

, 우리는 디스플레이를 사용할 수 있습니다. 또는 <table> 구조를 사용하여 원하는대로 만들 수 있습니다.

0
3 기간에 일부 왼쪽 여백을 추가하여

시도 :

margin-left:15px; 
0

솔루션

<div style="width:280px;"> 
    <span style="background-color:#333333; display: table-cell;"> 
     <img style = "width:16px; height=16px;"/> 
    </span> 

    <span style="background-color:#F111FF; display: table-cell;"> 
     <img style = "width:16px; height=16px;"/> 
    </span> 

    <span style="background-color:red; display: table-cell;"> 
SSSScontent 3 content 3 content 3 content 3 content 3 content 3 dfssssss 
    </span> 
</div> 
관련 문제