최대화되거나 작은 화면에서 텍스트가 겹칩니다.

나는 Jon Duckett의 책에서 CSS를 배우려고 노력하고 있습니다. 나는 포지셔닝과 수레의 개념을 배우고있다. 나는최대화되거나 작은 화면에서 텍스트가 겹칩니다.

<head> 
    <title>Try</title> 
    <style type="text/css"> 
     div#container { 
      width: 400px; 
      height: 400px; 
      padding: 5px; 
     } 

     div#cont_2 { 
      width: 800px; 
      padding: 0px 5px; 
      right: 7%; 
      position: absolute; 
      top: 10px; 
     } 

     p { 
      width: 300px; 
     } 

     p#right { 
      float: right; 
     } 

     p#clear { 
      clear: right; 
     } 

     p#cont_2_p { 
      width: 700px; 
     } 

    </style> 
</head> 
<body> 
    <div id="container"> 
     <p> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam nobis aliquam nihil quas soluta nemo ad magnam animi! Veritatis, magnam, vero, pariatur ducimus quibusdam ad sint nostrum architecto natus asperiores odio eum doloremque excepturi expedita veniam tenetur esse sapiente est unde molestiae error et dignissimos dolorem? Rem quas eius nesciunt repellat assumenda temporibus cumque aperiam. 
     </p> 
     <p id="right"> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, sint, soluta ab explicabo labore vero placeat porro fugit tempore dolore deleniti libero sit quod reprehenderit. 
     </p> 
     <p id="clear"> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, ullam. 
     </p> 
    </div> 
    <div id="cont_2"> 
     <p id="cont_2_p"> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, distinctio, asperiores, maxime amet quidem doloribus repudiandae tenetur quod odio laborum at hic nemo eaque! Vero. 
     </p> 
     <p id="cont_2_p"> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, dolorum, tempore, eveniet distinctio repellendus perspiciatis modi enim saepe officia voluptatem recusandae sed voluptas molestias itaque eius ex reiciendis voluptatum consequuntur architecto molestiae quos esse eaque minima minus velit dolore in voluptate qui vel sequi provident? 
     </p> 
    </div> 
</body>

하거나이를 구현하려고 할 때 : 그것은 브라우저에 100 % 줌에 잘 작동 http://jsfiddle.net/7qYYT/

을하지만 확대 할 때, 오른쪽에있는 텍스트는 왼쪽에있는 텍스트를 겹칩니다. 어떻게 극복합니까?

출처

2013-06-19 Daniel_V

을이 책에서 코드 인 경우, 내가하는 것이 좋습니다 다른 책을 찾을 수 있습니다! –

아니요! 나는 그것을 독자적으로 시도했다. –

아, 그래, 그 경우 ... 선택자에 대한 섹션을 검토하십시오. 'id'를'class'처럼 사용하고 있습니다. 동일한 ID를 가진 여러 요소를 가질 수 없습니다. 그리고 때로는'class' 나'id'를 사용할 필요가 없습니다. 다른 방법으로 정밀한 입도로 원하는 것을 지정할 수 있습니다. ;) –

이 때문에 가까운 위치 조상 div#cont_2

절대적으로 위치하는 요소가 위치하는 상대의 위치 absolute이다. 위치 된 조상이 존재하지 않으면 초기 컨테이너가 사용됩니다.

div#cont_2 { 
    width: 600px; 
    padding: 0px 5px; 
    float: right; 
    right: 7%; 
    /*position:absolute;*/ 
    top: 10px; 
    }

그리고 여기가 당신은 부모 요소의 10px에서이 사업부의 상단을 설정 top:10px을 설정했습니다. 그것은 다른 내용의 중첩을 만듭니다.

그리고 물론 id 셀렉터 대신 class을 사용하십시오. 그걸 재사용하고 싶다면. Id 선택기는 마크 업에서 고유해야합니다. Js Fiddle

출처

2013-06-19 14:24:58 Sachin

하지만 '콘테이너'의 내용 옆에있는 'cont_2'의 내용이 필요합니다. –

@Daniel_V 당신은'display : inline-block'을 사용할 수 있으며,'div '를 가질 수있는 충분한 공간이 있는지 확인하십시오. 한번보세요 http://jsfiddle.net/7qYYT/4/ – Sachin

개의 가능한 접근법 :

div#container { 
    width: 33.333%; 
    height: 400px; 
    padding: 5px; 
} 

div#cont_2 { 
    width: calc(66.667% - 10px); // taking padding into account, but this won't work IE<=8 
    padding: 0 5px; 
    right: 7%; 
    position: absolute; 
    top: 10px; 
}

사용 대신 포지셔닝 수레 대신 픽셀 고정 폭을 설정

이 비율을 이용하여 두 개의 용기에 대한 상대적인 폭을 설정할 (상대 너비로 다시) :

div#container { 
    float: left; 
    width: 33.333%; 
    height: 400px; 
    padding: 5px; 
} 

div#cont_2 { 
    float: right; 
    width: calc(66.667% - 10px); 
    padding: 0 5px; 
}

플렉스 박스와 같이 지원되지 않는 방법도 있습니다.

(BTW, 0px 사용하지 않는, 그냥 0를 사용합니다.)

출처

2013-06-19 14:47:29

최대화되거나 작은 화면에서 텍스트가 겹칩니다.

답변

관련 문제