相关疑难解决方法(0)
自动边距能否像在Flexbox中一样在CSS Grid中工作？
据我了解，flexbox可以做的任何事情，css-grid也应该可以做（通常更为冗长）。
但是我不知道如何用一个项目将其他项目推到 margin: auto
ul {
list-style-type: none;
padding: 0;
display: flex;
flex-direction: column;
outline: 1px solid red;
height: 200px;
background-color: lime;
}
li {
background-color: cornsilk;
}
li:last-of-type {
margin-top: auto;
}<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>看看所有单元格如何调整大小以适应其内容，最后一个单元格li将其他单元格推开以显示在最后吗？
我如何在不修改我的HTML来添加元素的情况下使用CSS网格呢？
ul {
list-style-type: none;
padding: 0;
display: grid;
outline: 1px solid red;
height: 200px;
background-color: lime;
}
li {
background-color: cornsilk;
}
li:last-of-type {
margin-top: auto;
}<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>这很接近，但是所有行的大小都不是min-content-我不知道它们的大小是多少，但大小不是min-content …
推荐指数
解决办法
查看次数
缩略图库的布局理论
我正在创建一个完全像这样的缩略图库(http://tmv.proto.jp/#!/destroyftw).目前我正在尝试制定脚本理论.网页的实际脚本在这里(http://tmv.proto.jp/tmv_v3.js).因为我对javascript相对较新,这让我有些沮丧.
我已经尝试过使用砌体和同位素等插件,但是它们无法处理大量的图像.更不用说无限滚动不适用于我需要的过滤.所以我决定尝试自己编码.
这个想法是用户提交的图像将被调整为具有设定宽度的缩略图(高度当然会被缩放以保持纵横比).然后这些缩略图将用于创建图库.我遇到的问题是,我发现布局有点棘手.
看起来页面首先被分成列以形成第一个"行".之后,缩略图放在最左边的最短列中(具体来说,我想知道这种特定图像定位技术背后的理论). 例如:数字也可以理解为图像的ID.(ID = "I_1" ID = "I_2"等)
这也会导致页面加载的级联淡入效果以及附加新图像(它们根据其ID简单地淡入).我试图使用上面的脚本页面作为参考无济于事.但是如果有人想自己检查我认为负责缩略图定位的功能是在"ViewManager"下.
重申一下,我不是在寻找有人为我工作.我只是需要帮助制定理论,所以我将有一个开始的地方.
**Note**(In the script): cellSize= 100; cellMargin=1; doubleSize=201 (cellSize*2+cellMargin); totalCellSize=101 (cellSize+cellMargin);
推荐指数
解决办法
查看次数
具有三（3）行和四（4）列的Flexbox网格
我有一个div，并使用flex在中心对齐了12个项目。
但是我只想在一行中有4个项目，所以我想要3行4列。
用flex可以吗？而且你知道怎么做吗？
我正在尝试这样做：https : //jsfiddle.net/18mzsqcx/1/，但是它不起作用。
还是最好只创建一个div，例如.col4宽度等于25％并留有一些边距，然后将此类.col4放在每个项目中？
*,
*:after,
*:before {
margin: 0;
padding: 0;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.container {
float: left;
width: 100%;
background-color: red;
}
.content {
width: 94%;
margin: 0px auto;
background-color: yellow;
padding: 30px;
}
.categories {
display: flex;
justify-content: space-between;
background-color: blue;
}
.categories_item a {
color: green;
}
.categories_item {
flex-grow: 1;
}<div class="container">
<div class="div content">
<div class="categories">
<div class="categories_item">
<a href="" …推荐指数
解决办法
查看次数
CSS 网格具有不等高和宽的列
我有 5 个盒子：三个在第一行，接下来的两个在第二行：
我希望除第二个之外的所有盒子都具有相同的高度，并且第五个盒子位于第三个盒子的正下方。
我用 flexbox 尝试过，现在我用display: grid. 如果可能的话，我正在寻找纯CSS解决方案。
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-auto-rows: min-content;
grid-gap: 0;
background-color: #2196F3;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
border: 1px solid #ccc;
font-size: 30px;
}
.item4 {
grid-column-start: 1;
grid-column-end: 3;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="grid-container">
<div class="item1"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div>
<div class="item2"><p>Lorem ipsum dolor sit amet, consectetur …推荐指数
解决办法
查看次数
flexbox 和网格系统有什么区别？
flexbox 和 grid 系统有什么区别？我应该在什么情况下使用每个系统？
推荐指数
解决办法
查看次数
CSS 网格在适合它的元素之前留下空白空间
大家好，我找不到任何帮助示例，因为我从未使用过 CSS 网格，无论如何，我将如何用下一个元素填充网格中的空白空间？我的1fr元素不适合之前的可用空间。是因为我将班级高度加倍还是什么？就像我说过的，我从未使用过 CSS 网格，但我现在只需要它们，这是我添加到代码中的最后一件事，你们能帮我吗？
#container {
width: 40%;
margin-left: 20%;
margin-bottom: 1rem;
display: grid;
float: left;
grid-template-columns: auto;
}
#container>div:nth-child(1) {
margin-top: 0 !important;
}
.content-1x,
.content-2x,
.content-3x {
margin: 1rem 1rem 0 0;
height: 15rem;
border-bottom: 1px solid #ddd;
border-right: 1px solid #ddd;
}
.double-height {
height: 30rem;
}
.content-3x {
grid-area: auto / auto / auto / span 3;
}
.content-2x {
grid-area: auto / auto / auto / span 2;
}
.content-1x {
grid-area: …推荐指数
解决办法
查看次数
如何使用 Bulma 完成像 Google Keep 这样的砖石布局？
我试图得到类似的东西：
我正在使用 Bulma，目前我正在使用带有is_multiline选项的列。但我唯一能得到的是：
我想消除卡片之间的差距，我想使用更多的 flexbox 选项。它也必须是响应式的。
.card-columns {
column-count: 1;
column-gap: 1.5rem;
padding: 1.5rem;
}
.card-columns .card {
display: inline-block;
width: 100%;
margin-bottom: 1.5rem;
}
.columns-6 {
column-count: 6;
}
.columns-5 {
column-count: 5;
}
.columns-4 {
column-count: 4;
}
.columns-3 {
column-count: 3;
}
.columns-2 {
column-count: 2;
}
.columns-1 {
column-count: 1;
}
@media (max-width: 768px) {
.columns-6-mobile {
column-count: 6;
}
.columns-5-mobile {
column-count: 5;
}
.columns-4-mobile {
column-count: 4;
}
.columns-3-mobile { …推荐指数
解决办法
查看次数
flexbox中的rowspan或colspan？
我是专业的后端程序员.但我刚开始学习flexbox,我想用flexbox打天空.
所以,我创建了一个最简单的设计,但在使用flexbox创建它时,它看起来最复杂.
这是设计:
伙计们,我无法弄明白,如何在没有行或列的情况下使用flexbox.我不知道但是在flexbox中有什么像rowspan或colspan我可以用来安排这些div,如上图所示？
这是我的代码:
HTML:
<div class="wrapper">
<div class="div-wrapper1">
<div class="inner-wrapper1">
<div class="div1"></div>
<div class="fake1"></div>
</div>
<div class="div2"></div>
</div>
<div class="div-wrapper2">
<div class="div3"></div>
<div class="inner-wrapper2">
<div class="fake2"></div>
<div class="div4"></div>
</div>
</div>
<div class="div-center"></div>
</div>
CSS:
.wrapper {
height: 200px;
width: 200px;
border: 1px solid black;
display: flex;
flex-direction: column;
}
.div-wrapper1 {
display: flex;
flex: 1;
}
.div-wrapper2 {
display: flex;
flex: 1
}
.inner-wrapper1 {
display: flex;
flex: 3;
flex-direction: column;
}
.div1 {
background-color: red;
display: flex; …推荐指数
解决办法
查看次数
CSS flex-wrap 如何让高度不拉伸
之间存在很大的差距box3, box1，box4, box6如何消除差距？那么每个都box可以有动态高度？
.wrap {
display: flex;
align-items: baseline;
align-content:flex-start;
justify-content: space-between;
flex-wrap: wrap;
background-color: lightblue;
}
.box {
display: flex;
background-color: tomato;
box-sizing: border-box;
border: 1px solid #C4C4C4;
height: 100px;
width: 45%;
margin-top: 15px;
}
.box1, .box4 {
height: 20px;
} <div class="wrap">
<div class="box box1">box1</div>
<div class="box box2">box2</div>
<div class="box box3">box3</div>
<div class="box box4">box4</div>
<div class="box box5">box5</div>
<div class="box box6">box6</div>
</div>这是所需的布局。谢谢
推荐指数
解决办法
查看次数