플로팅 div의 내용을 브라우저의 크기를 줄이기 위해 줄 바꿈을 할 수 있지만 줄 바꿈은 할 수 없습니다.

두 개의 div가 서로 옆에 표시되어야합니다. 첫 번째 div는 숫자 만 있고 다른 div는 링크입니다. 브라우저 (Firefox 및 크롬)의 크기를 조정하면 두 번째 div가 새 줄에 배치 된 다음 텍스트가 래핑됩니다. 두 번째 div의 텍스트를 첫 번째 줄에 맞춰 넣기를 원합니다.플로팅 div의 내용을 브라우저의 크기를 줄이기 위해 줄 바꿈을 할 수 있지만 줄 바꿈은 할 수 없습니다.

여기 이것은 내가 파이어 폭스에서 무엇을 얻을 내 코드

<html> 
    <body> 
     <style> 

      .row {  
        border: 1px solid yellow; 
        width: 100%; 
        overflow: auto; 
       } 

      .cell { 
        float:left;  
        border: 1px solid red; 
       } 

     </style> 

<div class="row"> 
    <div class="cell"><span>1</span></div> 
    <div class="cell"> 
     <a>This is some text. This is some text. This is some text. 
     This is some text. This is some text. This is some text. 
     This is some text. This is some text. This is some text. 
     This is some text. This is some text. This is some text.</a> 
    </div> 
</div> 

</body> 
</html>

그러나 이것은 내가 이것은 내가 원하는 무엇 인 IE에서 무엇을 얻을 enter image description here

을 원하는 무엇 없습니다. enter image description here

출처

2013-03-27 David

당신은 수레 대신 display:table-cell를 사용하여이를 달성 할 수 :

.row { 
    border: 1px solid yellow; 
    display:table-row; 
} 
.cell { 
    display:table-cell; 
    border: 1px solid red; 
}

이 바이올린 here를 참조하십시오.

출처

2013-03-27 13:45:29 ptriek

안녕하세요 이것은 파이어 폭스가 아닌 IE 8에서 작동합니다. 파이어 폭스 IE 8과 크롬이 작동해야합니다. – David

IE8은 테이블 셀을 완벽하게 지원합니다. [here] (http://www.thebackoffice.be/test.html)를 참조하십시오. – ptriek

Cool thanks a mil – David

두 개의 블록 요소를 너비를 지정하지 않고 플로팅하려고합니다. div는 블록 요소입니다 (기본값 = display : 블록;). 즉 너비를 지정하지 않으면 너비가 항상 100 %로 늘어납니다. 너비가 각각 100 % 인 두 개의 요소를 부동 상태로 만들려고 할 때. 그들은 같은 줄/행에 남아있을 수 없습니다. (200 %> 100 % 최대);

출처

2013-03-27 13:48:56 isotrope

플로팅 div의 내용을 브라우저의 크기를 줄이기 위해 줄 바꿈을 할 수 있지만 줄 바꿈은 할 수 없습니다.

답변

관련 문제