小编Mic*_*l_B的帖子
包裹时,删除多行柔性物品之间的空隙(间隙)
我试图在一个具有设定高度的容器中将多个项目放在彼此之下.如果没有空间,物品将彼此相邻.
这是个主意:
我试图使用flexbox实现这一点,flexbox是一个设置高度的容器,方向设置为column并且flex-wrap是wrap:
问题是列之间存在很大差距.
我试着设置都justify-content和align-items到flex-start,但是这可能是默认值.
有什么方法可以解决这个问题吗？
这是代码:
* {
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
.container {
display: flex;
flex-wrap: wrap;
height: 300px;
flex-direction: column;
background-color: #ccc;
}
.items {
width: 100px;
height: 100px;
margin: 10px;
background-color: tomato;
color: white;
font-size: 60px;
font-weight: bold;
text-align: center;
padding: 15px;
}<div class="container">
<div class="items">1</div>
<div class="items">2</div>
<div class="items">3</div>
<div class="items">4</div>
<div class="items">5</div>
</div>推荐指数
解决办法
查看次数
为什么带有> sign(direct child)的CSS选择器会覆盖默认样式？
有人可以向我解释为什么CSS > sign(direct child)会覆盖<li>此示例中所有标记的默认颜色:
ul > li {
color:red;
}<ul>
<li>This should be red
<ol>
<li>default color 1</li>
<li>default color 2</li>
</ol>
</li>
<li>And this should be red also
<ol>
<li>default color 3</li>
<li>default color 4</li>
</ol>
</li>
</ul> 预期结果:
实际结果:
我知道我可以通过添加来修复它li { color: black; },但我想知道为什么要ul > li覆盖默认颜色<li>？
推荐指数
解决办法
查看次数
如何在CSS网格布局中定位特定的列或行？
是否可以使用CSS选择特定的网格列或行？
例如,假设我有一个3行×2列CSS网格布局:grid-template-rows: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr;.如何从第2列中选择所有元素？例如:( grid:nth-child(column:2)只是我的想法,不是有效的代码).
我已经nth-child在div元素上尝试了选择器,但这不允许我在Grid Layout引擎自动放置项目时指定行或列.
body {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
}
.item {
background: #999;
}<div class="item">
<p>Customer Name</p>
<p>Element 1 | Element 2</p>
</div>
<div class="item">
<p>Right Justify</p>
<p>Element 1 | Element 2</p>
</div>
<div class="item">
<p>Customer Name</p>
<p>Element 1 | Element 2</p>
</div>
<div class="item">
<p>Customer Name</p>
<p>Element 1 | Element 2</p>
</div>
<div class="item">
<p>Customer …推荐指数
解决办法
查看次数
输入/按钮元素不会在Flex容器中缩小
在Flex容器中使用输入和按钮元素时,flex和/或flex-grow属性似乎没有做任何事情.
代码,演示我的问题.
button,
input {
font-size: 1rem;
}
button {
border: none;
background-color: #333;
color: #EEE;
}
input {
border: 1px solid #AAA;
padding-left: 0.5rem;
}
.inputrow {
width: 30rem;
display: flex;
margin: 0 -.25rem;
}
.inputrow>* {
margin: 0 .25rem;
border-radius: 2px;
height: 1.75rem;
box-sizing: border-box;
}
.nickname {
flex: 1;
}
.message {
flex: 4;
}
.s-button {
flex: 1;
}<div class="inputrow">
<input type="text" class="nickname" placeholder="Nickname">
<input type="text" class="message" placeholder="Message">
<button type="submit" class="s-button">Submit</button> …推荐指数
解决办法
查看次数
使网格项跨越到最后一行/列
当我不知道行数时,是否可以使网格项从第一行跨越到最后一行？
可以说我有以下html与未知数量的框.
如何.box从第一个网格线到最后一个网格线进行第三次跨度？
.container {
display: grid;
grid-template-columns: repeat(3, minmax(10rem, 1fr)) [last-col] 35%;
grid-template-rows: auto [last-line];
}
.box {
background-color: blue;
padding: 20px;
border: 1px solid red;
}
.box:nth-child(3) {
background-color: yellow;
grid-column: last-col / span 1;
grid-row: 1 / last-line;
}<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box">3</div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>推荐指数
解决办法
查看次数
在记事本++中更改匹配单词的高亮颜色
在notepad ++中选择单词时,如何更改突出显示的匹配单词的颜色？根据样式,匹配的单词突出显示几乎不可见.
推荐指数
解决办法
查看次数
list-style-type和list-style有什么区别？
当我来到造型名单的时候,我发现自己不能确定之间的差异list-style和list-style-type.它们是一样的吗？
推荐指数
解决办法
查看次数
在图象标记下的奥秘白色空间
我刚刚更改了我网站上的标题图片
<div style="background-image... width=1980 height=350>
使用
<img src="... style="width:100%;">
所以图像会缩小它现在所做的...
但现在我有这个神秘的10px差距左右.
我已经检查了Chrome中的检查员,我只是看不出是什么造成了空间.我搜索了其他帖子,但找不到任何适用的内容.
有人知道吗？感谢任何帮助,鲍勃:)
推荐指数
解决办法
查看次数
缩小以适应flexbox或flex-basis中的内容:内容解决方法？
我有一个webapp,我使用flexbox进行布局.
我试图填充屏幕(它是一个应用程序,而不是文档),并尽可能不指定任何固定的宽度或高度,因为内容可能是各种各样的事情(完全流畅的布局!梦想!)
所以我需要流体高度,全宽页眉和页脚,然后在中间的主面板填充剩余的垂直空间,分成列,每个列在太高时滚动,并且每个非主列的宽度应缩小适合其内容,以及占用剩余空间的主要列.
我是如此接近,但不得不求助于显式调整非主要列 - 我相信flex-basis: content;应该这样做但是浏览器还不支持.
这是一个显示固定大小列的最小演示:
var list = document.querySelector('ul')
for (var i = 0; i < 100; i++) {
var li = document.createElement('li')
li.textContent = i
list.appendChild(li)
}html,
body {
height: 100%;
width: 100%;
margin: 0;
}
body {
display: flex;
flex-direction: column;
}
main {
display: flex;
flex-direction: row;
overflow: hidden;
}
main > section {
overflow-y: auto;
flex-basis: 10em;
/* Would be better if it were fluid width/shrink to fit, …推荐指数
解决办法
查看次数
使用包装使最后一个元素占用剩余宽度(并使用IE9支持)
我正在寻找一种方法来将多个项目彼此相邻对齐,让它们在填满线条后进行换行,最后一个项目占用最后一行的剩余宽度.
我之前在类似主题上发现了多个问题,解决方案通常使项目用于float: left将它们对齐在一条线上,而overflow: hidden最后一个元素则使它自动占用剩余空间.这些解决方案在一行中工作正常,但是一旦在最后一个元素之前有足够的项目,它们就会停止工作,它们会被包装成多行.然后,"last"元素仍然在第一行中呈现(如果有足够的空间),使其不再是最后一个元素.
但是,我希望最后一个元素始终保持最后一个元素,将它放在最后一行 - 无论是什么行 - 并自动占用那里的剩余空间.
这是一个非常简单的包装Flexbox,因为你只需要放置flex: 0 auto前面的项目,使它们占用他们需要的任何空间(不需要更多),并flex: 1在最后一个元素上使其占用剩余部分.但是,我需要支持Internet Explorer 9,因此不幸的是,flexbox是不可能的.
这就是情况的样子.当运行片段,您可以使用"切换柔性框"按钮,切换Flexbox的模式,这表明它的方式应该的样子.
* { box-sizing: border-box; }
.container {
width: 300px;
background: snow;
padding: 5px;
overflow: auto;
}
.element {
float: left;
margin: 2px 5px 2px 0;
background: lavender;
}
.last {
overflow: hidden;
}
.last > input {
width: 100%;
}
/* Working solution with flex box */
.flex .container {
display: …推荐指数
解决办法
查看次数