标签: css-grid
在Gmail电子邮件中删除了Flex-box属性
我有一个PHP脚本,通过邮件发送以下HTML:
<html class="no-js" lang="en">
<body>
<div style="width: 70%;background-color: #060b2b;margin: auto;flex-direction: column;display: flex;">
<h1 style="margin-top: 50px;color: white;margin-left: auto;margin-right: auto;">Vous avez reçu une nouvelle notification.</h1>
<div style="width: 80%;padding: 50px;margin-top: 50px;background-color: #222;margin-left: auto;margin-right: auto;display: flex;">
<p style="color:white;margin: auto;text-align: center;">{{$notification}}</p>
</div>
<a href="" style="margin-top: 50px;margin-bottom: 50px;margin-left: auto;margin-right: auto;color: white;padding:15px;background-color: #0E0E0E;">Accéder à mon compte</a>
</div>
</body>
</html>
但收到的电子邮件(当我检查主要div时)并未显示该属性 flex-direction: column;
似乎gmail过滤了那些属性？
这是正常的吗？
9
推荐指数
推荐指数
1
解决办法
解决办法
5002
查看次数
查看次数
编译grid-column的问题少了
属性' grid-column '出现问题
CSS:
.someClass {
grid-column: 1 / 4;
}
少编译它在css中:
.someClass {
grid-column: 0.25;
}
但它运作良好:
.someClass {
grid-column-start: 1;
grid-column-end: 4;
}
如何在Less中正确使用带有'/'符号的属性grid-column？
9
推荐指数
推荐指数
2
解决办法
解决办法
1882
查看次数
查看次数
IE中Css Grid中的项目相互叠加
IE 11中的Css Grid中的项目相互叠加.在Chrome,FF和Safari中,一切都运行正常,但不是IE 11.
铬:
IE:
码:
.content-item__image {
height: 210px;
width: 100%;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.content-item__description {
padding: 16px 28px;
}
.content-grid {
display: grid;
display: -ms-grid;
grid-template-columns: 1fr 1fr 1fr;
-ms-grid-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
-ms-grid-rows: 1fr 1fr;
grid-gap: 1rem;
}<div class="content-grid">
<div class="content-item">
<div class="content-item__backdrop"></div>
<div class="content-item__image"></div>
<div class="content-item__description">Cos’è il Texas holdem</div>
</div>
<div class="content-item">
<div class="content-item__backdrop"></div>
<div class="content-item__image"></div>
<div class="content-item__description">Cos’è il Texas holdem</div>
</div>
<div class="content-item">
<div class="content-item__backdrop"></div> …9
推荐指数
推荐指数
1
解决办法
解决办法
5951
查看次数
查看次数
删除CSS Grid中的大差距
我使用css网格进行了设计,这给了我行间意想不到的空间.我用以下代码复制了我的问题:
main {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 10px;
grid-row-gap: 10px;
}
article {
background: red;
}
.item1 {
height: 30px;
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
}
.item2 {
height: 100px;
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 2;
grid-row-end: 3;
}
.item3 {
height: 300px;
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 3;
grid-row-end: 4;
}
.item4 {
height: 490px;
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 5;
}
.item5 {
height: 160px;
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 4; …9
推荐指数
推荐指数
1
解决办法
解决办法
1151
查看次数
查看次数
为什么min-content不能使用自动填充或自动填充？
基本上,我不明白为什么这样做:
.grid {
display: grid;
grid-template-columns: repeat(4, min-content);
}
但这不起作用:
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, min-content);
}
我真的希望使后一种功能成为可能.还有其他方法可以使它工作吗？
9
推荐指数
推荐指数
1
解决办法
解决办法
662
查看次数
查看次数
没有媒体查询的CSS网格最大列
是否可以定义一个最大列数的网格，但是当屏幕宽度改变时允许元素包装到新行上？
我有隐式类，允许行包装到新行上，但是没有最大列数。
这是使用弹性盒的一种方法的代码笔
CSS：
.flex-container {
display: flex;
flex-wrap: wrap;
}
另一种方法是使用网格
.grid {
display: grid;
counter-reset: grid-items;
position: relative;
}
.grid--auto-fit {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
我想要一个相当通用的解决方案，没有Java脚本或媒体查询，我想实现的目标是否可能？
9
推荐指数
推荐指数
1
解决办法
解决办法
210
查看次数
查看次数
对齐不同父容器的子元素
我正在尝试跨容器垂直对齐可变高度元素，即每个容器中的第一个元素彼此垂直对齐，每个容器中的第二个元素彼此垂直对齐，等等。
我正在使用 flexbox 但不确定这是否可能？或者是否可以使用 CSS Grid？
期望的结果
main {
display: flex;
flex-wrap: wrap;
}
.container {
background: grey;
margin: 0 10px 20px;
padding: 10px;
width: 200px;
}
.top {
background: red;
}
.middle {
background: blue;
}
.bottom {
background: green;
}<main>
<div class="container">
<div class="top">Some text here, Some text here, Some text here</div>
<div class="middle">And some here, And some here, And some here, And some here, And some here, And some here</div>
<div class="bottom">And …8
推荐指数
推荐指数
2
解决办法
解决办法
1505
查看次数
查看次数
css网格中的自动行跨越
有没有办法获得自动行跨越（项目占用垂直网格单元的自动数量）？
在我的示例中，我希望单元格 8 自动跨越 2 个（或更多）单元格，而无需明确说span 2. 我一直在寻找如何做到这一点，但似乎不可能。
我想让每个单元格都是 100 像素的倍数，这样最小的单元格是 100 像素，如果内容溢出，它会变成 200 像素高，更多的内容是 300 像素，等等。
换句话说，我希望有一种 css 网格可以自动确定 XX 的方法：
.i { grid-row: span XX; }
.i { grid-row: span XX; }
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 2fr));
grid-auto-flow: dense;
}
.grid div {
border-left: 1px solid #000;
border-top: 1px solid #000;
padding: 10px;
}
.grid div.i {
grid-row: span 2;
}8
推荐指数
推荐指数
1
解决办法
解决办法
3269
查看次数
查看次数
CSS Grid 中间有一个额外的包装器
我想使用 CSS Grid 的 grid-template-areas。
但问题是我使用的 CMS 添加了许多额外的包装器。有没有办法忽略额外的包装器？因为它弄乱了漂亮的网格区域......
我正在尝试覆盖 css 网格的自动放置机制。因此，任何位于中间且未分配特定网格区域的 div 将出现在网格的末尾，并且不会与网格本身混淆。
我在这里创建了一个问题示例 - https://codepen.io/shaal/pen/qPvQWW
您可以看到，由于额外的包装器，“侧边栏”元素没有分配到我想要的区域。
HTML
.container {
display: grid;
grid-gap: 5px;
grid-template-areas: "header header header" "sidebar content content" "sidebar content content" "footer footer footer";
}
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
height: 180px;
}
.footer {
grid-area: footer;
}<h1>CSS GRID</h1>
<div class="container">
<div class="item header">Header</div>
<div class="cms-annoying-wrapper">
<div class="item sidebar">Sidebar</div>
<div class="item content">Content</div>
</div>
<div class="item footer">Footer</div>
</div>8
推荐指数
推荐指数
2
解决办法
解决办法
4388
查看次数
查看次数
如何使元素填充剩余的视口高度？
我想使用 CSS 网格。像这样的事情我想……
html {
height: 100%;
}
body {
min-height: 100%;
display: grid;
grid-template-rows: auto auto [whatever's left of the vh] auto auto;
position: relative;
}
8
推荐指数
推荐指数
1
解决办法
解决办法
5181
查看次数
查看次数