범위를 사용하여 li 요소 내부의 텍스트 모양 바꾸기

Question

li 요소 내부에 텍스트를 형성하는 데 문제가 있습니다. 내가 가지고있는 한 가지 문제는 부유물 - 오른쪽 divs 상단 오른쪽에 떠있는하지만 상단에 공간을두고있다. 또한 텍스트가 올바르게 올바르게 형성되지 않습니다. this jsfiddle에서 볼 수 있듯이 div는 격자 선 안쪽에 있지만 텍스트는 줄 바깥에 나타납니다. 또한 그들이 맞지 않을 때 단어를 분리하기 위해 대시를 넣을 수있는 방법이 있습니까 (내가 마지막 것에했던 것처럼), 또는 텍스트를 더 작게 만드시겠습니까?

나쁜 텍스트 오버 플로우를 보여줍니다

업데이트 jsfiddle : 여기

http://jsfiddle.net/u773M/1/ 내 텍스트 플로트 된 div를 생성 PHP입니다 : 당신이 추가하면

<?php for ($i = 1; $i < 7; $i++) { 
echo '<div class="trianglefloatleft" style="width:'.(3+($i*6)).'%;"></div>'; 
echo '<div class="trianglefloatright" style="width:'.(9+($i*6)).'%;"></div>'; } 
?> 

Answer 1

@hakra 덕분에, 나는 거기에 부분적으로 도착했습니다. 그러나 실제 솔루션은 훨씬 간단하고 더 이해하기 쉽습니다 (왜 이렇게 오래 깨닫지 못했는지 모르겠 음). 먼저 float을 오른쪽 div에 놓으십시오!

관심있는 사람들을위한 업데이트 된 코드 : http://jsfiddle.net/u773M/4/

Answer 2

이

<div class="trianglefloatleft" style="width:9%;"></div> 
<div class="trianglefloatright" style="width: 9%; margin-top: -12px;"></div> 

작동합니다 그것 귀하의 상태에 따라 너비가 9 % 인 div를 만드는 것을 의미합니다.