css float가 예상대로 작동하지 않는 이유

나는 float : left와 float : right로 각각 2 개의 div를 만들었으며 각각 50 %의 열 너비가 있습니다. 여전히 그들은 예상대로 흐르지 않습니다. 두 번째 float은 첫 번째 div의 오른쪽이 아니라 첫 번째 div의 아래에 있습니다. 플로트는 규칙에 따라 동작하지 않습니다. 그럼 내가 여기서 뭘 놓치고있는 거지?css float가 예상대로 작동하지 않는 이유

<html> 
    <head> 
     <title> 

     </title> 
     <style type="text/css"> 
      .column { 
       width: 50%; 
      } 
      div.right { 
       float: right; 
      } 
      } 
      div.left { 
       float: left;  
      } 

      img { 
       float: right; 
       margin: 0 0 1em 1em; 
      } 
     </style> 
    </head> 
    <body> 


    <div class='left column'> 
     <img src="css-float.png"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. 
    </div> 

    <div class='right column'> 
     <img src="css-float.png"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. 
    </div> 


    </body> 
    </html>

출처

2014-07-24 user310291

귀하의 CSS가 유효하지 않으므로 나머지 스타일 시트로드가 중단됩니다.

는 여기를 참조하십시오 : 당신은 두 번 규칙을 닫는

 div.right { 
      float: right; 
     } 
     }

, 두 번째 닫는 대괄호

출처

2014-07-24 11:46:43

아차 내가 바보 감사합니다 :) 해요 – user310291

Fiddle

 .column { 
      width: 49%; 
     } 

     div.left, div.right { 
      float: left; 
      border-right: 1px solid; 
     }

당신의 폭을 줄을 제거합니다. 나란히 있어야하므로 두 컨테이너가 같은 컨테이너에 있기 때문에 플로트를 추가합니다.

출처

2014-07-24 11:46:59

Demo.

.column { 
       width: 50%; 
      } 
      div.right { 
       float: right; 
      } 

      div.left { 
       float: left;  
      } 

      img { 
       float: right; 
        padding-right: 15px; 
       margin: 0 0 1em 1em; 
}

출처

2014-07-24 12:00:03 BeyondNero

css float가 예상대로 작동하지 않는 이유

답변

관련 문제