0
아래의 예를 참조하십시오. 나는 CSS 격자를 배우고있다. 모든 목적을 단순하게 유지하고 불필요하게 하위 요소에 대한 고유 한 레이아웃 세부 정보를 지정할 필요가 없으므로 솔루션은이 패턴을 준수해야합니다.간단한 CSS 레이아웃 유지
을 감안할 때 다음
function toggle(t) {
document.querySelectorAll('div').forEach(el =>
el.classList[0] === t.classList[0] ?
el.classList.toggle('selected') :
el.classList.remove('selected'))
}:root,
html,
body,
main {
margin: 0;
padding: 0;
font-family: sans-serif;
height: 100%;
}
main {
border: solid 3pt white;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
}
div {
grid-area: span 2/span 2;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
font-size: 5em;
font-weight: bold;
color: white;
background: grey;
}
.one {
background: red
}
.two {
background: green
}
.three {
background: blue
}
.selected {
width: 150%;
height: 150%;
z-index: 2;
}<main>
<div class=one onclick="toggle(event.target)">one</div>
<div class=two onclick="toggle(event.target)">two</div>
<div class=three onclick="toggle(event.target)">three</div>
<div class=four onclick="toggle(event.target)">four</div>
</main>https://jsfiddle.net/robbie_at_harvard/a3ouq711/1/
지역 둘, 셋, 넷은 왼쪽 상단에서 항상 중앙으로 확장 대신하게하는 조정하십시오 모서리? 다시 말하지만, div.class 사양과 관련된 규칙보다는 일반적인 규칙을 사용하는 것이 좋습니다.
두 번째 질문 : 2x2 하위 요소의 4x4 레이아웃 대신 하나의 요소를 클릭하여 3x3으로 확장하고 다른 요소를 반대 구석의 1x2, 2x1 및 1x1로 축소하려는 경우 두 번째 질문을 생성하는 데 필요한 사항 해결책?
사용 CSS 규모를해야합니다 모든 경우에 생각하고 신장? https://stackoverflow.com/questions/28726430/css-how-to-scale-an-image-from-the-center-instead-of-top-left – evolutionxbox
거의 작동합니다 .. 또한 오프셋도 가능합니다. 완전한 해결책을 제공하기 위해, 오프셋은 선택된 클래스와 위치 클래스 모두에 의존해야합니다. 위치 클래스를 사용해야한다면 괜찮은 일이지만,이 간단한 예제가 적어도 필요하지는 않을 것이라고 기대하고있었습니다. –