div 안의 텍스트가 줄 바꿈되지 않습니다.

여기에서 보이는 것처럼 : http://jsfiddle.net/EhnuZ/ 상단 그룹에는 짧은 양의 텍스트가 있고 텍스트는 이미지의 오른쪽에 있습니다. 하단 그룹은 내부에 더 많은 텍스트가 있다는 점을 제외하면 동일합니다. 그러나 이렇게하면 텍스트가 원하는 위치에 배치되는 대신 이미지 아래로 이동합니다. 어떻게이 문제를 해결할 수 있습니까? 나는 시도했다 :div 안의 텍스트가 줄 바꿈되지 않습니다.

white-space:normal; 
word-wrap: break-word; 
width:50%; 
max-width:50%;

출처

2012-08-08 Jack S.

당신은 텍스트 컨테이너에 대한 width를 지정해야합니다, 그렇지 않으면 자동 폭을 100 %로하려고합니다. <p> 또는 포함하는 요소 중 하나에 폭없이

.text{ 
     vertical-align:top; 
     display:inline-block; 
     width: 30%; 
    }

출처

2012-08-08 17:02:00 Scillon

float : 이미지에 왼쪽을 사용 해본 적이 있습니까?

출처

2012-08-08 16:58:37 Maude

예 그것에 width 또는 max-width를 설정하여 부모의 단락의 폭을 제한하지만, 인쇄 또는 작은 창에 표시 할 때 다른 문제가 발생합니다. –

내가 생각할 수있는 가장 간단한 것은 그림과 텍스트를 테이블에 넣는 것입니다. 예컨대는 :

<table> 
     <tr> 
      <td> 
       <img src="http://i0.kym-cdn.com/entries/icons/original/000/007/263/photo_cat2.jpg"> 
      </td> 
      <td valign="top"> 
       <div class="text"> 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis ligula ut mi laoreet viverra sit amet non dolor. Vivamus quis velit elit. Aenean dignissim porttitor lorem, ac ullamcorper quam porttitor molestie</p> 
       </div> 
      </td> 
     </tr> 
    </table>

출처

2012-08-08 17:01:47

테이블은 좋지 않은 접근 방법이므로 가능하면 피해야합니다. 몇 가지 이유가 여기에 있습니다. (http://phrogz.net/css/WhyTablesAreBadForLayout.html) – Scillon

멋지다. 해결책은 분명 좋습니다. 나는 CSS 측면, 특히'display : inline-block' 속성 설정에 대해 정말로 생각하지 않았습니다. 다소'table'의 적용을 제거합니다. –

@Scillon 여기서 언급해야 할 중요한 것은 * 테이블이 레이아웃에 나쁜 접근이라고 생각합니다. 귀하의 의견은 새로운 개발자를 * 테이블이 나쁘다는 생각에 혼동시킬 수 있습니다. 테이블은 표 형식의 데이터를 표시 할 때 사용하는 정확한 도구입니다. 그냥 우리가 명확히해야한다고 생각 :) – dudewad

는 해당 컨테이너를 채우기 위해 확장에서 요소를 방지하기 위해 브라우저의 렌더링 엔진에 대한 이유가 없다. 당신이 원하는 무엇

는

출처

2012-08-08 17:02:47 jackwanders

div 안의 텍스트가 줄 바꿈되지 않습니다.

답변

관련 문제