overflow-x : scroll & white-space : nowrap을 사용하여 (바둑판 식 배열) 배경 이미지가있는 가로 스크롤 창을 만들려고합니다 . 창은 임의의 수의 요소에 걸쳐 있습니다.
CSS :
.frame {
overflow-x: scroll;
}
.pane {
background-image: url(free-tile-floor-texture.jpg);
background-repeat: repeat;
white-space: nowrap;
}
.item {
display: inline-block;
width: 150px;
height: 50px;
background-color: grey;
}
HTML :
<div class="frame">
<div class="pane">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
배경 타일이 모든 항목 요소를 포함하여 창의 전체 너비에 자동으로 확장되기를 원합니다. 현재는 프레임 너비로만 채워집니다. 범인은 창 너비 속성 인 것 같습니다. 창 내용의 전체 너비에 맞게 조정되지 않습니다.
Ofc는 width 속성을 수동으로 조정하여 작동하지만 동적으로 조정해야합니다.
창의 배경 이미지를 창의 전체 너비로 채우려면 어떻게해야합니까? 동일한 결과를 얻을 수있는 다른 방법이 있습니까?
이 줄 추가 .pane
display: inline-block;
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다