범위의 인라인 블록

StackOverflow https://stackoverflow.com/questions/34581

문제

다음 샘플에서는 두 개의 스팬 태그가 나란히 표시되는 대신 서로 아래에 표시될 것으로 예상했습니다.span.right 클래스의 너비를 49%로 설정하면 서로 옆에 표시됩니다.오른쪽 범위에 보이지 않는 패딩/여백이 있어서 50% 이상 걸리는 것처럼 오른쪽 범위가 아래로 밀려나는 이유를 알 수 없습니다.HTML 테이블을 사용하지 않고 이 작업을 수행하려고 합니다.어떤 아이디어가 있나요?

<html>
<head>
    <title>Test Page</title>
    <style type='text/css'>
        * {
            margin: 0;
        }

        html,body{
            margin:0;
            padding:0;
            height:100%;
            width:100%;
            border:none;
        }

        div.header{
            width:100%;
            height:80px;
            vertical-align:top;
        }

        span.left {
            height:80px;
            width:50%;
            display:inline-block;
            background-color:pink;
        }

        span.right {
            vertical-align:top; 
            display:inline-block;
            text-align:right;
            height:80px;
            width:50%;
            background-color:red;
        }
    </style>
</head>
<body>
    <div class='header'>
        <span class='left'>Left Span 50% width</span>
        <span class='right'>Right Span 50% width</span>
    </div>
</body>
</html>

설명해주셔서 감사합니다.float:left는 FF 3.1에서 예상되는 결과와 함께 아름답게 작동합니다.안타깝게도 IE6에서는 오른쪽 범위가 50%의 50%를 렌더링하므로 사실상 브라우저 창의 너비가 25%가 됩니다.너비를 100%로 설정하면 원하는 결과를 얻을 수 있지만 표준 준수 모드인 FF 3.1에서는 작동하지 않으며 이를 이해합니다.해킹이나 여러 CSS 시트를 사용하지 않고 FF와 IE 6에서 모두 작동하도록 하는 것은 어려운 일이었습니다.

도움이 되었습니까?

해결책 

float: left;

그것을span.left에 추가해 보세요

구문에서 제안한 대로 왼쪽으로 부동하게 됩니다.

저는 결코 CSS 전문가가 아니므로 이것을 논쟁의 여지가 없는 사실로 받아들이지 마십시오. 그러나 뭔가가 떠 있을 때 그 아래에 있는 것의 수직 위치에는 아무런 차이가 없다는 것을 알았습니다.

span.right를 오른쪽으로 띄운 다음 그 아래에 텍스트를 추가하면 흥미로운 결과를 얻을 수 있습니다. 이러한 "흥미로운 결과"를 중지하려면 "clear:왼쪽/오른쪽/둘 다" 이렇게 하면 명확한 스타일이 있는 블록이 왼쪽/오른쪽/둘 다에 떠 있는 모든 것 아래에 놓이게 됩니다. W3학교 이 속성에 대한 페이지도 있습니다.

그리고 Stackoverflow에 오신 것을 환영합니다.

다른 팁

이는 inline 및 inline-block 요소 사이에 공백(귀하의 경우 줄바꿈)이 포함되어 있기 때문입니다.귀하의 경우 요소의 결합된 너비는 50%+50%+공백 > 100%입니다.

HTML 문서의 같은 행에 두 요소를 배치해야 합니다(공백 없이).

<div class='header'>
    <span class='left'>Left Span 50% width</span><span class='right'>Right Span 50% width</span>
</div>

또는 HTML 주석을 사용하세요.

<div class='header'>
        <span class='left'>Left Span 50% width</span><!--
     --><span class='right'>Right Span 50% width</span>
</div>

나 자신은 후자를 선호한다.

나는 이 해킹을 좋아하지 않지만 Firefox와 IE6 모두에서 작업을 수행하는 것 같습니다.

span.right {
  vertical-align:top; 
  display:inline-block;
  text-align:right;
  height:80px;
  width:50%;
  *width:100%;
  background-color:red;
}

참고하세요 *width: 100% 이는 IE6의 요구 사항을 충족하는 것으로 보이며 Firefox에서는 무시됩니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top