0
달성하려는 목표는 다음과 같이 동작하는 두 개의 열 그리드 레이아웃을 갖는 것입니다. : col 1 세트 inline의 display 속성IE11 : 첫 번째 열의 표시 여부에 따라 두 번째 열이 두 열 또는 한 열을 채우는 두 열 그리드 레이아웃을 만드는 방법
경우 - 레이아웃을 렌더링해야 다음과 같이
경우+------+--------------+
| | |
| | |
| c | c |
| o | o |
| l | l |
| | |
| 1 | 2 |
| | |
| | |
+------+--------------+
col 1의 display 속성 none로 설정되면 - 두 열을 차지한다 col 2 :
+---------------------+
| |
| |
| c |
| o |
| l |
| |
| 2 |
| |
| |
+---------------------+
, 나는 다음과 같은 CSS를 통해 그것을 달성 할 수 있었다 :
#content {
display: grid;
grid-template-columns: 15% minmax(85%, 1fr);
}
.col-1 {
background: #D2691E;
/* display: none; */
grid-row-start: 1;
grid-row-end: 1;
}
.col-2 {
background: #191970;
grid-row-start: 1;
grid-row-end: 1;
grid-column-start: auto;
grid-column-end: span 2;
}
비록, 내가 IE11에서 일할 동일해야하고, 그것을 가져 더 까다 롭습니다. this을 읽고 this one, IE10 및 IE11의 그리드 구현에 관한 기사를 살펴 보았습니다.
col 1은 결국 메뉴가 될 것이므로 display 속성 (Chrome 및 Firefox에서 예상대로 작동하며 IE11에서는 작동하지 않음)을 토글/숨기기 버튼으로 데모를 준비했습니다. 외부를 통해 이동 -
function toggleDisplay() {
\t var menu_div = document.getElementById('menu');
if (menu_div.style.display === '' || menu_div.style.display === 'none') {
\t menu_div.style.display = 'inline'
} else {
\t menu_div.style.display = 'none' \t
}
}#content {
display: -ms-grid;
display: grid;
-ms-grid-columns: 15% minmax(85%, 1fr);
grid-template-columns: 15% minmax(85%, 1fr);
-ms-grid-rows: 1fr;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
.menu {
background: #D2691E;
display: none;
-ms-grid-row: 1;
grid-row-start: 1;
-ms-grid-row-span: 1;
grid-row-end: 1;
}
.content-area {
background: #191970;
-ms-grid-row: 1;
grid-row-start: 1;
-ms-grid-row-span: 1;
grid-row-end: 1;
-ms-grid-column: 2;
grid-column-start: auto;
-ms-grid-column-span: 2;
grid-column-end: span 2;
}<body>
<div id='content'>
<div class='menu' id='menu'></div>
<div class='content-area'>
<button onclick=toggleDisplay() >Show/hide 'display:none'</button>
</div>
</div>
</body>는 또한 '메뉴'를 전환의 다른 방법을 시도했다 보기 같은 결과 (크롬에서 작동, 파이어 폭스하지 IE11에서, 적어도, IE의 메뉴를 전환하지만) :
function toggleLeft() {
var menu_navigation = document.getElementById('menu');
if (menu_navigation.style.position === 'fixed' || menu_navigation.style.position === '') {
open();
stopAnimation();
} else {
close();
}
}
function close() {
var menu_navigation = document.getElementById('menu');
if (menu_navigation.style.position !== 'fixed') {
menu_navigation.style.position = 'fixed';
menu_navigation.style.left = '-15%';
menu_navigation.style.witdh= '100%';
menu_navigation.style.height = '100%';
}
}
function open() {
var menu_navigation = document.getElementById('menu');
if (menu_navigation.style.position !== 'relative') {
menu_navigation.style.position = 'relative';
menu_navigation.style.left = '0';
menu_navigation.style.widh = 'auto';
menu_navigation.style.height = 'auto';
}
}#content {
display: -ms-grid;
display: grid;
-ms-grid-columns: 15% minmax(85%, 1fr);
grid-template-columns: 15% minmax(85%, 1fr);
-ms-grid-rows: 1fr;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
.menu {
background: #D2691E;
position: fixed;
left: -15%;
height: 100%;
-ms-grid-row: 1;
grid-row-start: 1;
-ms-grid-row-span: 1;
grid-row-end: 1;
}
.content-area {
background: #191970;
-ms-grid-row: 1;
grid-row-start: 1;
-ms-grid-row-span: 1;
grid-row-end: 1;
-ms-grid-column: 2;
grid-column-start: auto;
-ms-grid-column-span: 2;
grid-column-end: span 2;
}<body>
<div id='content'>
<div class='menu' id='menu'></div>
<div class='content-area'>
<button onclick=toggleLeft() >Show/hide 'left: -15%'</button>
</div>
</div>
</body>I 을 및 second (JSFiddle)에 대해 auto으로 설정해 보았습니다. (위의 예는 필자가 원하는 결과를 얻을 수있을만큼 가까운 것 같습니다.) 위의 예에서 desi 적색 결과는 아직 성취되지 않았습니다.
내 질문은 :
- IE11에서 원하는 그리드 레이아웃을 달성하기 제조법 일반 CSS와 함께, 무엇 (즉, 이전 프로세서 등을 사용하지 않고)?
- 그리드는 IE11 지원이 필요하다는 것을 나타내는 좋은 접근 방법입니까, 아니면 다른 접근 방식이 권장됩니다 (그렇다면 무엇이 될 수 있습니까?).
.content-area{ grid-column-start: 1; } #menu[style="display: block"] + .content-area{ grid-column-start: auto; }또는 이미 JS와 인라인 스타일을 적용하고 있기 때문에, 당신은 추가에 스타일링 인라인 그리드를 제거 할 수 있습니다 :
가능한 복제본 : https://stackoverflow.com/q/23794713/3597276 –