相关疑难解决方法(0)
仅CSS的砌体布局
我需要实现一个相当普遍的磨坊砌体布局.但是,出于多种原因,我不想使用JavaScript来执行此操作.
参数:
- 所有元素都具有相同的宽度
- 元素的高度无法在服务器端计算(图像加上各种文本量)
- 如果必须的话,我可以使用固定数量的列
有这一个简单的解决方案,在现代浏览器,工作的column-count性质.
该解决方案的问题是元素按列排序:
虽然我需要按行排序元素,至少大约:
我试过的方法不起作用:
现在我可以更改服务器端渲染并重新排序项目数除以列数的项目,但这很复杂,容易出错(基于浏览器决定将项目列表拆分成列的方式),所以我想要尽可能避免它.
是否有一些新奇的flexbox魔法可以实现这一目标？
推荐指数
解决办法
查看次数
如何使用CSS Grid布局粘贴页脚？
我在CSS Grid布局中找到了一个粘性页脚的CodePen解决方案,但它对我来说有两个问题:
- 这是有点丑
min-height: 100%和height: 100% - 它只适用于身体中的两个元素(div和footer)
我需要一些适用于这种HTML结构的东西:
<body>
<nav>Some navigation buttons</nav>
<main>The content</main>
<footer>Copyrights and stuff</footer>
</body>
我真的不想收拾<nav>和<main>成<div>,我就喜欢这样做纯CSS.
// Not required!
// This is just to demo functionality.
$("#add").on("click", function() {
$("<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris …推荐指数
解决办法
查看次数
在CSS Grid中为网格间隙设置不同的长度
我正在使用CSS网格创建一个布局,我希望每行之间有不同的空间.
我可以通过在每个元素上使用margin来创建布局,但这种模糊了代码的简单性.有没有我可以做到的网格技巧,grid-row-gap只看到一个值,它用于所有行.
我想要实现的是这样的布局:
https://jsfiddle.net/8swzgk0b/1/
.grid {
display: grid;
grid-template-columns: auto 25% 25%;
grid-template-rows: auto auto auto;
width 100%;
margin: 20px;
grid-column-gap: 40px;
/* grid-row-gap: 40px 60px; */
}
div {
background: #838383;
height: 80px;
}
.wide {
grid-column: 1 / span 3;
margin-bottom: 5px;
}
.row-2 {
background: green;
margin-bottom: 10px;
}
.row-3 {
background: blue;
margin-bottom: 30px;
}
.row-4 {
background: red;
margin-bottom: 20px;
}<div class="grid">
<div class="wide"></div>
<div class="row-2"></div>
<div class="row-2"></div>
<div class="row-2"></div>
<div class="row-3"></div> …推荐指数
解决办法
查看次数
如何获取不同长度的网格项目？
使用repeat()和auto-fit/ auto-fill函数,当列或行具有已定义的长度模式时,很容易获取网格项.
在下面的示例中,所有列的最小宽度为100px,最大宽度为1fr.
#grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-gap: 1em;
}
#grid > div {
background-color: #ccddaa;
padding: 10px;
}<div id="grid">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>但是当轨道没有长度模式(即长度随机变化)时,网格物品如何包裹？
在下面的示例中,第一列的宽度为60%.第二列是最小/最大250px/1fr.如何让第二列包装在较小的屏幕上？
#grid {
display: grid;
grid-template-columns: 60% minmax(250px, 1fr);
grid-gap: 1em;
}
#grid > div {
background-color: #ccddaa;
padding: 10px;
}<div id="grid">
<div></div>
<div></div>
</div>我知道flexbox和媒体查询提供了解决方案,但我想知道Grid Layout是否可以做到这一点.我搜索了规格,但没有找到任何东西.也许我错过了这个部分.谢谢你的帮助.
推荐指数
解决办法
查看次数
minmax失败(无效的属性值)
Chrome提供invalid property value并且不尊重CSS:
grid-template-columns: repeat(auto-fill, minmax(auto, 1fr));
auto用min-contentand 替换时也会失败max-content.
当auto被固定值替换时,它按预期工作,例如
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
这是令人惊讶的,因为这两个repeat和minmax支持的关键字.
HTML很简单
<div class='wrapper>
<div>...</div>
<div>...</div>
</div>
和css
.wrapper {
display: grid
grid-template-columns: repeat(auto-fill, minmax(auto, 1fr));
}
推荐指数
解决办法
查看次数
当我在 Chrome 中调整视口大小时，为什么带有边距的网格项：自动闪烁？
我注意到带有边距自动（显示网格的子项）的元素的位置有些闪烁。
我已经隔离了这个问题，请看下面的代码。
我知道我可以用不同的方法将元素居中，但这个方法应该有效。我到处搜索，但找不到任何有同样问题的人，但我在另一台计算机上尝试过，它具有相同的行为。
我希望红色框只是居中在父元素的中间，而不是在调整大小时闪烁
section {
display: grid;
}
div {
width: 200px;
height: 200px;
background: red;
margin: auto;
}<section>
<div></div>
</section>推荐指数
解决办法
查看次数
使用Grid很难或不可能实现Flexbox涵盖的哪些领域？
突出强调了Flexbox用于1-D，而Grid用于2-D，但是我还没有找到清楚的解释，为什么不能将Grid用于1-D并替代Flexbox。在我来到最接近的就是
但是您也可能会争辩说，像这样的纯一维布局在Flexbox中更强大，因为Flexbox允许我们更轻松地移动这些元素（例如，将它们全部移动到一侧或另一侧，更改其顺序，将它们均匀地隔开等）。
我将Grid和Flexbox用于基本布局：框在页面上的一般放置以及一些动态的（通常是堆叠的）。美观的（烤面包机，模式，...）通过框架进行管理。我还没有发现Grid无法立即替换Flexbox的情况（即没有高级CSS 技巧或很多代码）。
以上面的引用为例，提到的所有“动作”都可以在Grid中直接使用，通常具有与Flexbox相同的语义。
Flexbox涵盖哪些难以或无法通过Grid管理的基本领域？
编辑：浏览器支持并不重要（我只使用常绿的浏览器，如果需要可以切换）
推荐指数
解决办法
查看次数