모든 하위를 감싸는 스타일을 만드는 방법

CSS 레이아웃을 사용하여 격자 레이아웃에서 작업하고 있으며 총 CSS 솔루션을 원한다면 가능한 경우 javascript로 해결할 수있는 방법이 있습니다. 모든 하위를 감싸는 스타일을 만드는 방법

행이 뷰포트 너비를 초과

, 그것은 스크롤, 를 표시하지만 스크롤 할 때, 행 요소의 스타일은, 그것은 보이지 않는다 는 "포장"뷰포트의 크기에 남아있는 모든 자식.

참조 : fiddle

스크롤하려고하면 노란색 행 (.sk_row) 클래스는 모든 아이들이 주위에 나타나지 않습니다 볼 수 있습니다.

해결책은 좋지만 부모가 시각적으로 모든 하위를 포함하지 않는 이유를 알고 싶습니다.이 question과 동일하지 않습니다 : 나는 바이올린 코드의

중복 ...

<body> 
<div id='pg_wrap'> 
    <div id='frm0'> 
     <div class='sk_scrl'> 
       <div class='sk_row'> 
        <div class='itm_val'>row 1</div> 
        <div class='itm_val'>1</div> 
        <div class='itm_val'>2</div> 
        <div class='itm_val'>3</div> 
        <div class='itm_val'>4</div> 
        <div class='itm_val'>5</div> 
        <div class='itm_val'>6</div> 
        <div class='itm_val'>7</div> 
        <div class='itm_val'>8</div> 
       </div> 
       <div class='sk_row'> 
        <div class='itm_val'>row 2</div> 
        <div class='itm_val'>1</div> 
        <div class='itm_val'>2</div> 
        <div class='itm_val'>3</div> 
        <div class='itm_val'>4</div> 
        <div class='itm_val'>5</div> 
        <div class='itm_val'>6</div> 
        <div class='itm_val'>7</div> 
        <div class='itm_val'>8</div> 
       </div> 
      </div> 
    </div> 
</div>

이

#frm0{  width:420px;height:200px} 
.sk_scrl{ overflow:auto;display:flex;flex-flow:column;align-content:stretch} 
.sk_row{ 
    display:flex; 
    justify-content:flex-start; 
    align-items:center; 
    background:#ff0;border:2px #f00 solid; 
    height:50px} 
.itm_val{ 
    display:flex; 
    border:1px #000 solid;background:#666; 
    flex:0 0 100px; height:30px; margin:0 5px; 
    align-items:center;justify-content:center}

참고 ... 내가 flexboxes에 대한 몇 가지 중요한 개념없는 것 같아요 op가 하위 동작을 변경하려고하므로 상위를 변경해야합니다.

출처

2014-11-14 Mahks

함께 스크롤 독립적으로 스크롤 할 수있는 행 또는 모든 행 위치 : 여기

는 바이올린입니까? –

바이올린에서와 같이 모두 함께 저에게 노란 부분이 있습니다. – Mahks

나는 그것을 가지고있다, 독립적으로 일하고있다, 지금 묶어 라. –

그것은 #frm0에서이 경우, .sk_row는 폭을 상속하기 때문에 당신이 원하는 방식으로 작동하지 않습니다 :

:이 설정 있기 때문에 당신은 그것을 아주 잘 볼 수 .sk_scrl 클래스와

#frm0 { width: 420px; }

.sk_scrl { overflow: auto; }

브라우저 개발자 도구 (있는 경우)를 사용하면 .itm_val div로 둘러싸인 요소의 너비가 모두 420 픽셀임을 알 수 있습니다. .itm_val div가 모두 컨테이너 외부에 표시되는 이유는 포함 된 div에서 "오버플로"하기 때문입니다.

여기 폭-상속-일이 어떻게 작동하는지에 대한 예입니다 : 당신이 .container퍼센트 50의 폭을 설정하면

<div class="container"> 
    <div class="element"></div> 
</div>

,이 창에서 사용 가능한 폭의 절반을 사용합니다. 이 100 %로 설정 한 경우

.element { 
    width: 200%; 
}

, 그것은 단지 넓은 .container로 될 것이다 : 그러나, 당신은 윈도우의 전체 폭을 차지하기 위해 .element을 원하는 경우에, 당신은이 같은 너비를 조정해야합니다 . http://jsfiddle.net/Niffler/n8hmpv13/

출처

2014-11-15 00:09:23 Niffler

그래서 css로 컨테이너의 너비를 flex 자식의 너비로 설정할 수 없습니까? (콘테이너가 너무 구부릴 때) – Mahks

내 지식에 ... 미안. (그러나 나는 "flex"에 대한 많은 경험이 없다 ...) 배경에 관한 것이라면'.sk_scrl'가'.sk_row' 대신에 배경색과 테두리를 갖도록 변경할 수 있습니다. (테두리는 똑같은 모양이 아닐 것입니다), 또는 .sk_row가'.sk_scrl' 대신에'overflow : auto'를 갖도록 변경하십시오. (그러나 두 개의 스크롤바가 있습니다.) – Niffler

그냥 깨달았습니다. 왜 내가 이걸로 힘든 시간을 보내고있다. 오버플로가 설정된 요소가 스크롤되는 요소라고 생각했지만 어쩌면 스크롤하는 내용 일 수 있습니다. 그러면 스타일과 스크롤 막대 너비가 일치하지 않는 이유가 설명됩니다. – Mahks

모든 하위를 감싸는 스타일을 만드는 방법

답변

관련 문제