相关疑难解决方法(0)
当flexbox项目以列模式换行时,容器不会增加其宽度
我正在研究嵌套的flexbox布局,它应该如下工作:
最外层(ul#main)是一个水平列表,当添加更多项时,它必须向右扩展.如果它变得太大,应该有一个水平滚动条.
#main {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
overflow-x: auto;
/* ...and more... */
}
此list(ul#main > li)的每个项目都有一个header(ul#main > li > h2)和一个内部列表(ul#main > li > ul.tasks).此内部列表是垂直的,应在需要时包装到列中.当包装到更多列时,其宽度应该增加,以便为更多项目腾出空间.此宽度增加也应适用于外部列表的包含项.
.tasks {
flex-direction: column;
flex-wrap: wrap;
/* ...and more... */
}
我的问题是当窗口的高度太小时内部列表不会换行.我已经尝试了很多篡改所有的flex属性,试图仔细遵循CSS-Tricks的指导,但没有运气.
这个JSFiddle显示了我到目前为止所拥有的内容.
预期结果 (我想要的):
实际结果 (我得到的):
较旧的结果 (我在2015年得到的):
UPDATE
经过一番调查,这开始看起来像一个更大的问题.所有主流浏览器的行为方式都相同,而且与我的嵌套Flexbox设计无关.更简单的flexbox列布局拒绝在项目换行时增加列表的宽度.
这其他的jsfiddle清楚地表明了问题.在当前版本的Chrome,Firefox和IE11中,所有项目都正确包装; 列表的高度在row模式中增加,但其宽度在column模式下不会增加.此外,在更改column模式的高度时,根本没有立即回流元素,但存在row模式.
然而,官方规范 …
推荐指数
解决办法
查看次数
如何创建网格/平铺视图？
例如,我有一些类.article,我想将此类视为网格视图.所以我应用了这种风格:
.article{
width:100px;
height:100px;
background:#333;
float:left;
margin:5px;
}
该样式将使.article看起来平铺/网格.固定高度可以正常工作.但是如果我想将高度设置为自动(根据其中的数据自动拉伸),网格看起来很讨厌.
而我想这样的观点:
推荐指数
解决办法
查看次数
柔性物品是否可以与其上方的物品紧密对齐？
实际上,这是Pinterest布局.但是,在线发现的解决方案包含在列中,这意味着容器无意中水平生长.这不是 Pinterest布局,并且它不适用于动态加载的内容.
我想要做的是有一堆固定宽度和不对称高度的图像,水平放置,但当满足固定宽度容器的限制时包裹在一个新行中:
flexbox可以做到这一点,还是我不得不求助于像Masonry这样的JS解决方案？
推荐指数
解决办法
查看次数
为什么Firefox和Edge中的填充项目的百分比填充/边距不起作用？
我想在flexbox中有一个方形div.所以我使用:
.outer {
display: flex;
width: 100%;
background: blue;
}
.inner {
width: 50%;
background: yellow;
padding-bottom: 50%;
}<div class="outer">
<div class="inner">
<a>hehe</a>
</div>
</div>这在Chrome中运行良好.但在Firefox中,父母只挤到一行.
我如何在Firefox中解决这个问题？我使用的是44版.
推荐指数
解决办法
查看次数
CSS网格单元的高度不同
如何向上移动"内容"和"右"块响应？问题是我无法使用子嵌套网格.我不需要hacks:没有margin-top因为header可以是不同的高度.没有javascript.只有纯CSS.如果可能的话.
现在我的标记看起来像这样:
.wrapper {
border: 1px solid red;
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-areas:
"aside header header"
"left content right";
grid-gap: 15px;
}
.header, .aside, .left, .content, .right {
border: 1px solid black;
padding: 10px;
}
.header {
grid-area: header;
height: 30px; /* in real case it's responsive height */
}
.aside {
grid-area: aside;
height: 80px; /* in real case it's responsive height */
}
.left {
grid-area: left;
}
.content {
grid-area: content;
background: yellow;
}
.right …推荐指数
解决办法
查看次数
使元素占据两列
我尝试使用 css 和如下标记的列布局来实现砌体风格。
我想知道是否有可能使.green一列采用两列而不是一列？
先感谢您！
.parent{
column-gap: 1rem;
column-count: 2;
}
.element{
display:inline-block;
background:red;
width:100%;
height:100px;
}
.green{
background:green;
}<div class="parent">
<div class="element green">
</div>
<div class="element">
</div>
<div class="element">
</div>
<div class="element">
</div>
</div>推荐指数
解决办法
查看次数
我可以使用 Tailwind CSS 实用程序类创建 Masonry 布局吗？
我正在尝试使用 Tailwind CSS 实用程序类（不是普通 CSS）创建 Masonry 布局，但浏览所有官方 Tailwind 文档似乎框架已经提供了没有办法做到这一点。
Bootstrap 5 允许您做到这一点，但需要 JavaScript 库。 https://getbootstrap.com/docs/5.0/examples/masonry/
有没有一种方法可以使用 Tailwind CSS 来做到这一点，而无需使用任何额外的 JavaScript 库？
推荐指数
解决办法
查看次数
使div在网格中跨越两行
我有一个装满了块的页面display: inline-block.我想做四到两倍大,所以我用float: left或者right把其他块放在一边.
我的问题是,如果我有一个五行元素,我怎么能在它的中间放一个更大的元素？(float自然而然地放在一边).
这是一个示例代码段:
#wrapper{
width: 516px;
}
.block{
display: inline-block;
width: 90px;
height: 50px;
margin: 5px;
background-color: red;
}
.bigger{
height: 110px;
}<div id="wrapper">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block bigger"></div>
<div class="block"></div>
<div class="block"></div>
</div>以下是我希望从上面的代码段中获得的内容 
推荐指数
解决办法
查看次数
在网格上设置 css grid 子元素的大小，而不指定它应该进入的列或行
是否可以在它们应该跨越的行/列数量中设置 div 的高度和宽度，而没有具体指定它们应该进入哪些列或行？
例如，如果我有两个类，比如说.long和.wide，并且我希望.long该类为 3 行高和 1 列宽，并且.wide该类为 3 列宽但只有 1 行高。
我的特定用例涉及 Angular 5，我正在动态加载对象，并希望其中的一些比其他的大。我知道我可以使用 flexboxes 并设置高度来做到这一点，但是很想知道我是否可以用网格实现相同的（更整洁），但我一直在发现每个类都指定了grid-column: x/y; grid-row: a/b等等。
推荐指数
解决办法
查看次数
删除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; …推荐指数
解决办法
查看次数
标签 统计
css ×10
html ×6
css-grid ×5
css3 ×5
flexbox ×5
grid-layout ×2
css-float ×1
firefox ×1
grid ×1
html5 ×1
javascript ×1
pinterest ×1
positioning ×1
tailwind-css ×1
tiles ×1