CSS 오버플로 문제

젠장, 나는 항상 CSS에 좌절감을 느낀다. 나는 책과 기사/독서 책을 계속 읽지 만 CSS는 피타입니다!CSS 오버플로 문제

나는 다음과 같은 코드했습니다 :

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Testing CSS</title> 
<style type="text/css"> 
<!-- 
body { 
    background: #dddddd; 
    font: 12px "Trebuchet MS", Helvetica, sans-serif; 
    color: #000; 
} 
.box { 
    background: #FFF; 
    width: 500px; 
    border: 1px solid #999999; 
    -moz-border-radius: 5px; 
} 
.box .content { 
    background: #FFF; 
    padding: 15px; 
    -moz-border-radius: 5px; 
} 
.message { 
    border: 1px solid #bbbbbb; 
    padding: 10px; 
    margin: 0px 0px 15px; 
    background-color: #DDDDDD; 
    color: #333333; 
    -moz-border-radius: 5px; 
} 
.message.info { 
    border-color: #9FD1F5; 
    background-color: #C3E6FF; 
    color: #005898; 
} 
._50\% { 
    display: inline; 
    float: left; 
    margin: 0 2%; 
    overflow: hidden; 
    position: relative; 
    width: 46%; 
} 
--> 
</style> 
</head> 

<body> 
    <div class="box"> 
     <div class="content"> 
      <div class="message info">Info message.</div> 
      <div class="message _50%">Simple message.</div> 
      <div class="message _50%">Simple message.</div> 
     </div> 
    </div> 
</body> 
</html>

그러나 아무리 내가 뭘 나는이 "단순 메시지는"나란히 표시 "정보 메시지"울부 짖는 소리 얻을 것으로 보인다 수 없습니다를, 나는 이미 display, overflow 등을 가지고 노려 보았습니다. 아무 것도 작동하지 않습니다.

CSS Overflow http://a.imagehost.org/0658/Testing-CSS_1279773508176.png

무엇이 누락 되었습니까?

출처

2010-07-22 Alix Axel

있는 브라우저가 (들) 당신은 문제가 발생한? – jrista

@rista : 모두 최신 버전. 스크린 샷은 Firefox에서 제공됩니다. –

Eric Meyer의 "CSS : The Definitive Guide"를 읽으셨습니까? 그것은 대단한 접지입니다. –

수학이 옳지 않습니다. 50 % 이상이다

2% + 46% + 2% + (1 px BORDER on each side) + (10px PADDING on each side)

: 안구 가지의

하자의 종류

Simple Message 상자의 폭을 가지고 함께 .... 시작합니다!

CSS box model은 패딩, 테두리 및 여백의 너비가 요소의 CSS 정의 너비 외부에 추가됩니다 (이론적으로는 실제로는 older versions of IE don't follow this rule, 최신 버전이 적용됨).

따라서 .message에 대한 border 및 padding 정의는 Simple Message 상자를 뚱뚱하게합니다.

Simple Message 상자의 너비를 41 %로 떨어 뜨리면 같은 행이됩니다.

항복

OK, 여기 상자입니다 ....의 이유를 이해하기 위해 구체적인 내용을 살펴 보자 : 이제 왜 폭 않습니다

class box 
    500px wide with a 1px border all around 
     Pixels left to play with ==> 500 

class content 
    15px padding on the OUTSIDE of .content on all side. 
    content is INSIDE .box, the maximum width of .content is 500px 
    but the padding is taking up some of this space (15*2 = 30px) 
     Pixels left to play with ==> 470 

class message info 
    The maximum width of anything inside .content is 470px 
    There are two _50% boxes, so each can have a max total width 
     (including all the padding, border, margin) of 470/2 = 235px 
    Width of 
     + 46% of 470px = 216.2   = 216px 
     + 2*10px padding    = 20px 
     + 2*1px border     = 2px 
     + 2*(2% of 470px) = 2*9.4 = 2*9 = 18px 
     --------------------------------------- 
              256px! ==> 2*256 > 470

(41) % 직장?

42% of 470 = 197.4 = 197. 
197 + 20 + 2 + 18 = 237 
237 * 2 = 474........ and 474 > 470

일반

에서 내가 Firebug를 사용하여 물건을 살펴 제안하기 때문에

class box 
     Pixels left to play with ==> 500 

class content 
     Pixels left to play with ==> 470 

class message info 
    Width of 
     + 41% of 470px = 192.7   = 193px 
     + 2*10px padding    = 20px 
     + 2*1px border     = 2px 
     + 2*(2% of 470px) = 2*9.4 = 2*9 = 18px 
     --------------------------------------- 
              233px ==> 2*233 < 470

마지막으로 42 %가 작동하지 않습니다. 상자 모델을 표시하는 Layout 탭과 Style 탭 사이를 번갈아 가며 변경하십시오. 여기서 임시로 CSS를 테스트 할 수 있습니다! 붕괴 상자 문제에 대한

, 내가 제안 :

.box .content { 
     /* This lets .content expand in height with the floating divs inside it */ 
    overflow: auto; 
}

출처

2010-07-22 05:43:48

... 그리고 국경을 계산하기 전에 백분율의 합계를 100 % 늘릴 수있는 반올림 오류가있었습니다. – Quentin

큰 설명, 그건 분명히. 고마워요! –

거기에 좋은 수학 .. :) –

우선, overflow: hidden을 .content 요소에 넣어보세요. 자식 요소에 오버플로를 설정하면 오버플로를 방지하는 데별로 도움이되지 않습니다. 포함 요소에 overflow : hidden을 설정하면 (대부분의 브라우저에서) 자식을 포함하도록 확장합니다.

출처

2010-07-22 04:51:04 jrista

감사합니다. 이제 간단한 메시지가 상자 안에 표시됩니다. 한 가지 문제가 있습니다! 그래도 그들은 나란히 서 있지는 않지만 제 계산이 맞다고 믿습니다 (2 + 46 + 2) * 2 = 100. –

이 CSS는 나를 위해 작동 px

를 사용하는 것이 두 _50%이 content의 대신 % 폭의 사용과 함께보다 큰의와 총처럼 보인다 _50%의 폭 낮은 단순하려고 시도 당신이 display: inline 또는 float에 의해 옆 사업부 디스플레이 측을 만들고 싶어

._50\% { 
    display: inline; 
    float: left; 
    margin: 0 2%; 
    overflow: hidden; 
    position: relative; 
    width: 90px; 
}

당신은 컨테이너의 폭과 용기 내부의 사업부 년대의 폭을 계산해야합니다. 특별히 margin과 padding이 있으면 공백을 차지합니다.

출처

2010-07-22 04:54:47

유체 웹 사이트에서 % 너비를 사용하고 싶습니다. % px를 사용하는 이유가 많이 있습니다. – Sphvn

그러나 상대 단위가 그 문제를 해결해서는 안됩니까? (2 % + 46 % + 2 %) * 2 = 100 %, 아니요? –

% 문자를 사용하는 유효한 (또는 널리 지원되는) CSS 클래스가 어떤 것인지 잘 모르겠습니다.

너비가 테두리를 고려하지 않을 수도 있습니다 (브라우저마다 다른 상자 모델).

출처

2010-07-22 04:56:31

감사합니다. 그러나 상대 너비가 다른 상자 모델의 문제를 해결해서는 안됩니까? 내 해석은 사용 가능한 공간의 100 %를 차지해야한다는 것이지만, 그렇지 않은 경우 해결 방법이 있습니까? –

내부 메시지의 테두리를 제거하고 어떤 결과가 나타나는지보십시오. 너비가 이것을 고려하지 않을 수도 있으므로'content'에 패딩을 넣지 않고 시도하십시오. 'px'와'%'를 결합하는 것은 항상 재앙을위한 방법입니다 (분명히 때때로 필요합니다). –

._50 클래스의 여백 때문에 너비를 더 낮은 값으로 변경합니다 (예 : 41 %. 또한 위치 상대 및 inlne 지시문을 제거합니다.

._50\% { 
    float: left; 
    margin: 0 2%; 
    width: 41%; 
}

새로운 클래스하는 명확한를 추가하고 외부 사업부를 확장 할 수 있도록 메시지 아래이 명확 클래스와 새로운 사업부를 추가합니다.

.clear 
{ 
    clear: both; 
}

, V

<body> 
     <div class="box"> 
      <div class="content"> 
       <div class="message info">Info message.</div> 
       <div class="message _50%">Simple message.</div> 
       <div class="message _50%">Simple message.</div> 
       <div class="clear"></div> 
      </div> 
     </div> 
    </body> 
    </html>

모든 즉. 수레는 훌륭한 도구이지만, 어떻게 깨우쳐야하는지 이해해야합니다.

출처

2010-07-22 05:19:02 zidane

CSS 오버플로 문제

답변

관련 문제