3 개의 스팬이 있습니다. 처음 두 개는 아이콘 (그림) 16x16 픽셀을 포함합니다. 세 번째 스팬에는 긴 텍스트가 포함됩니다. 문제는 텍스트가 너무 길면 두 번째 줄에도 나타나지만 줄의 시작 부분에 나타납니다. 첫 줄과 같은 위치에서 정렬되고 시작해야합니다. 이 3 개의 스팬은 어느 div로 감싸 질 수 없습니다. 이를 성취 할 수있는 가능성이 있습니까? 여기 그림을보고하는 샘플 페이지 spans example
http://jsfiddle.net/P76Sg/3가 서로 나란히 있습니다. 정렬
0
A
답변
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}
또는 다른 접근을하고 스팬이 테이블 셀로 표시가 : 테이블 셀 : * Vucko * 제안
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>
관련 문제
- 1. 텍스트 개체를 서로 나란히 정렬 - KineticJS
- 2. 서로 나란히 스팬 맞추기
- 3. 블록에 UL/LI/Divs 정렬 - 나란히 나란히
- 4. 텍스트와 이미지가 나란히 정렬
- 5. divs가 서로 나란히 스태킹되는 문제
- 6. 두 테이블이 나란히 있습니다.
- 7. bootstrap3 divs를 서로 나란히 정렬하십시오.
- 8. INPUT과 DIV를 나란히 정렬
- 9. Div 정렬 나란히 오버플로
- 10. knitr을 사용하여 두 data.frames를 나란히 정렬 하시겠습니까?
- 11. MVC 3가 잘못된 위치에서 이미지를 찾고 있습니다.
- 12. Google Maps API 3가 버그가 있습니다.
- 13. symfony와 WordPress가 서로 나란히 실행되도록 nginx 설정
- 14. 두 단락을 서로 나란히 정렬하는 방법
- 15. HTML TD의 요소를 서로 나란히 정렬합니다.
- 16. CSS 중심의 div가 나란히 있습니다
- 17. CSS 두 divs가 나란히 있습니다
- 18. 서로 요소 정렬
- 19. 정렬 된 div의 서로
- 20. 서로 내부 div의 정렬
- 21. div 요소를 수레를 사용하여 나란히 정렬
- 22. 플렉스 컬럼에 2 개의 아이템을 나란히 정렬
- 23. 채울 수있는 항목이 서로 겹쳐서 정렬 될 수 있습니다.
- 24. 두 개의 나란히 놓인 ImageViews 중앙 정렬
- 25. 수평 중앙에 나란히 텍스트와 이미지 정렬
- 26. div 안에 텍스트와 이미지를 서로 나란히 표시 한 다음 div의 내용을 가운데 정렬 하시겠습니까?
- 27. 크기 차트 나란히 나란히
- 28. 내 div의 옆을 나란히 정렬 할 수 없습니다.
- 29. 3 프레임 나란히 나란히
- 30. TCPDF 나란히 나란히 표
당신은'디스플레이 넣을 수 있습니다 :은'span' 요소 테이블 cell'을 - [JSFiddle] (http://jsfiddle.net/P76Sg/1/) – Vucko
어떻게 알 수 있습니까? 고마워. – user1554427