尋找到網格佈局溶液使用IE11和邊緣IE11修復以供顯示的網格佈局
的間隙時我的意思是.button
當右側內容增加需要避免時,高度是巨大的。
是否有可能避免IE11的這些差距& Edge?
window.location = '#one';
.my-wrap {
display: -ms-grid;
display: grid;
-ms-grid-columns: 25% fr;
grid-template-columns: 25% 1fr;
grid-gap: 0.5rem;
width: 90%;
margin: 50px auto;
color: #fff;
}
.wrap-one {
background-color: tomato;
}
.wrap-two {
background-color: blue;
}
.wrap-three {
background-color: green;
}
.button {
text-decoration: none;
background-color: #333;
color: #fff;
padding: 0.5rem 1rem;
-webkit-transition: all 0.25s;
transition: all 0.25s;
}
.button:nth-of-type(1) {
-ms-grid-row: 1;
grid-row: 1;
}
.button:nth-of-type(2) {
-ms-grid-row: 2;
grid-row: 2;
}
.button:nth-of-type(3) {
-ms-grid-row: 3;
grid-row: 3;
}
.button:nth-of-type(4) {
-ms-grid-row: 4;
grid-row: 4;
}
.button:nth-of-type(5) {
-ms-grid-row: 5;
grid-row: 5;
}
.button:hover {
background-color: #000;
}
.details {
display: none;
border: 1px solid #333;
color: #333;
}
div:target {
display: block;
}
p {
margin: 10px;
}
<div class="my-wrap">
<a href="#one" class="wrap-button-one button">Link One</a>
<div id="one" class="wrap-one one details">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum voluptates ipsa tempora qui voluptas, dicta corrupti dolorum, iure esse earum ut pariatur, ad possimus facilis consequatur impedit accusantium autem! Nesciunt?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam repudiandae, dolor unde laudantium ducimus explicabo necessitatibus doloribus. Repellendus quasi necessitatibus omnis culpa sint dolore, error sapiente magni sequi, harum eveniet!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio est, deserunt autem laboriosam quis culpa ex animi soluta tenetur quo eius illo necessitatibus. Minima deleniti recusandae commodi? Ipsa, laudantium architecto?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore ipsam, necessitatibus excepturi obcaecati quis consequatur autem, eos incidunt, accusantium esse dolorum? Reprehenderit, dicta pariatur a eligendi placeat optio praesentium architecto.</p>
</div>
<a href="#two" class="wrap-button-two button">Link Two</a>
<div id="two" class="wrap-two two details">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat commodi aspernatur et! Voluptates officiis nemo corporis delectus pariatur. Cupiditate perspiciatis illum minima, porro voluptas velit nobis ad eveniet modi explicabo.</p>
</div>
<a href="#three" class="wrap-button-three button">Link Three</a>
<div id="three" class="wrap-three three details">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis reprehenderit, necessitatibus vel praesentium dolorum vitae sequi in magni voluptate alias fugit saepe eos sint dolore quae sapiente sunt itaque, cupiditate.</p>
</div>
<a href="#four" class="wrap-button-four button">Link Four</a>
<div id="four" class="wrap-four four details">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores debitis ducimus optio magnam ratione voluptatem voluptatum repellendus facilis. Repellat velit facilis reiciendis ratione recusandae delectus iure doloribus inventore, dolorum porro?</p>
</div>
<a href="#five" class="wrap-button-five button">Link five</a>
<div id="five" class="wrap-five five details">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit nam ab, iusto corrupti quos molestiae tempora sapiente eos unde debitis sint exercitationem aperiam hic inventore veniam, in est labore vitae! Lorem ipsum dolor, sit amet consectetur
adipisicing elit. Tempora, vel maxime! Autem ullam, quidem, ipsum obcaecati vitae alias, omnis dolores amet doloremque accusamus fugiat? Dolor iure ipsa minus nostrum sapiente.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus voluptatum harum nulla placeat, hic nesciunt consequuntur laborum officia quos eos et id veritatis quibusdam aliquam exercitationem dolores, reiciendis voluptate modi.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Non voluptas explicabo dolorum at officia deserunt quaerat nam debitis incidunt est, ut pariatur modi ipsa velit laborum, dolorem doloribus dicta consequuntur!</p>
</div>
</div>
你的結構不會允許這個(我認爲)。我很確定你會想要嵌套的網格 –
@Paulie_D我認爲這樣。希望可能有一些智能開發人員在stackoverflow誰可以給一些hacky解決方案;-) – Muhammed
沒有... CSS網格並不真正像那樣的AFAIK工作。你的左側和右側應該在一個單獨的網格父母,因爲他們會有不同的**行**結構......但讓我想。 –