相关疑难解决方法(0)
为什么弹性项目不会缩小内容大小？
我有4个flexbox列,一切正常,但是当我向列添加一些文本并将其设置为较大的字体大小时,由于flex属性,它使得列比应该更宽.
我尝试使用word-break: break-word并且它有所帮助,但是当我将列调整到非常小的宽度时,文本中的字母被分成多行(每行一个字母),但是列的宽度不比一个字母大小小.
观看此视频 (一开始,第一列是最小的,但是当我调整窗口大小时,它是最宽的列.我只想总是尊重flex设置; flex size 1:3:4:4)
我知道,将字体大小和列填充设置为较小会有所帮助......但还有其他解决方案吗？
我不能用overflow-x: hidden.
.container {
display: flex;
width: 100%
}
.col {
min-height: 200px;
padding: 30px;
word-break: break-word
}
.col1 {
flex: 1;
background: orange;
font-size: 80px
}
.col2 {
flex: 3;
background: yellow
}
.col3 {
flex: 4;
background: skyblue
}
.col4 {
flex: 4;
background: red
}<div class="container">
<div class="col col1">Lorem ipsum dolor</div>
<div class="col col2">Lorem ipsum dolor</div>
<div class="col col3">Lorem ipsum dolor</div> …推荐指数
解决办法
查看次数
使用CSS Grid折叠边框
我很高兴能够了解新的CSS Grid规范,但我遇到了边界问题.
是否有可能在CSS网格中折叠边框,或者是否有任何方法来设置排水沟的样式？
正如您在下面的代码段中看到的那样,10px边框堆叠(20px总计)在块之间.
我知道这个问题并不是CSS网格独有的,但我希望它能够为所有方框和外边缘之间创建统一的10px边框提供新的解决方案.
我的实际用例是我正在使用Grids和React组件进行练习的日历.你可以看到我遇到的问题:
.
由于每个月都不同,我会考虑很多不同的边缘情况.
.container {
display: grid;
grid-template-columns: 120px 120px;
box-sizing: border-box;
}
.block {
width: 100px;
height: 100px;
background-color: lightgrey;
border: 10px solid palegreen;
}
.first {
grid-column: 2 / span 1;
}<div class='container'>
<div class='block first'>1</div>
<div class='block'>2</div>
<div class='block'>3</div>
</div>我很喜欢网格,但谷歌很难找到它!甚至一些关于如何改进我的问题的建议将非常感激.边界正在崩溃吗？内部网格线？
谢谢!
推荐指数
解决办法
查看次数
CSS网格:内容使用可用空间,但滚动时更大
我第一次使用CSS网格布局,他们很棒.但是现在,我无法控制我的一个网格单元.
我想要的是拥有一个占用现有可用空间的元素,而不是更多,当内容变得太大时滚动.我的理解是,1fr在计算其他所有内容之后,网格大小会占用可用空间的均匀数量.我尝试了各种尺寸,minmax(auto, 1fr)但无济于事 - 1fr似乎扩展到适合我不想要的内容.设置最大尺寸大小100px也不好,因为我希望大小由网格中的其他元素决定.
这是一个例子:
.container {
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 1fr 1fr;
}
.container>div {
border: 1px solid blue;
border-radius: 5px;
}
.left {
grid-column: 1;
grid-row: 1/4;
}
.header {
grid-column: 2;
grid-row: 1;
}
.problem-child {
grid-column: 2;
grid-row: 2;
overflow-y: scroll;
}
.footer {
grid-column: 2;
grid-row: 3;
}<div class="container">
<div class="left">left<br>I don't want this one to scroll<br>this should<br>determine<br>the height …推荐指数
解决办法
查看次数
为什么minmax(0,1fr)适用于长元素而1fr不适用？
所以我有这个网格:
+---------+------------------------------+---------+
| <div> | <p> - 1000 characters long | <div> |
+---------+------------------------------+---------+
里面p有超长的字符串,没有空格.divs是具有固定尺寸的占位符.这产生了以上:
display: grid;
grid-auto-flow: column;
grid-template-columns: auto minmax(0, 1fr) auto;
但minmax(0, 1fr)改为1fr给出这个:
+---------+----------------------------------------+
| <div> | <p> - 1000 characters long | <div> |
+---------+----------------------------------------+
它从其父级溢出并超出屏幕大小.为什么它不像minmax？
推荐指数
解决办法
查看次数
css网格使用fr增长超过100%,但不是minmax
.small-container { width: 200px; }
.small-container > div { margin: 16px; }
.border { box-shadow: 0 0 2px 2px black; }
.break-long-text {
width: 100%;
word-wrap: break-word;
overflow-wrap: break-word;
}
.grid-fr {
display: grid;
grid-template-columns: 1fr;
}
.grid-minmax {
display: grid;
grid-template-columns: minmax(120px, 1fr);
}<div class="small-container">
<div class="grid-fr">
<div class="break-long-text border">
LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOONG
</div>
</div>
<div class="grid-minmax">
<div class="break-long-text border">
LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOONG
</div>
</div>
</div>两个网格完全相同,唯一的区别是grid-template-columns价值.但是,一个网格尊重其父(200px)的宽度,另一个网格忽略宽度.
grid:
grid-template-columns: 1fr;=>忽略父宽度并继续,直到内容被填充grid:
grid-template-columns: minmax(120px, 1fr);=>仅上升到parent-width(200px)然后变为必要的高度.但是,它仍然大于定义的min-width( …
推荐指数
解决办法
查看次数
自动填充和自动装配有什么区别？
我正在使用CSS网格来实现卡网格布局.
但我不太知道如何调整minmax()语句来处理没有足够的项目来填充行但仍然需要它们看起来像卡片的用例!
如果我用静态100px替换最大1fr值或使用小数0.25fr,它会在较小的介质尺寸下扰乱缩放.
.wrapper {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-column-gap: 17px;
grid-row-gap: 25.5px;
padding-bottom: 25.5px;
}
.card {
background-color: #000;
height: 100px;
}<div class="wrapper">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>然后,如果只有几个项目
.wrapper {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-column-gap: 17px;
grid-row-gap: 25.5px;
padding-bottom: 25.5px;
}
.card {
background-color: #000;
height: 100px;
}<div class="wrapper">
<div class="card"></div>
<div class="card"></div>
</div>推荐指数
解决办法
查看次数
如何使图像保持在css网格容器的行内？
下面的代码显示了我在Chrome 60和Firefox 55中调整窗口大小时的预期行为(但在iOS Safari 10.3中没有;这很可能是另一个问题,为什么它在Safari中行为不当).
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
border: 0;
background-color: lightgrey;
}
.container {
box-sizing: border-box;
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(3, calc((60vh - 12px)/3));
/*grid-template-rows: 1fr 1fr 1fr;*/
/*grid-template-rows: auto auto auto;*/
height: 60vh;
border: 3px solid yellow;
padding: 3px;
/*grid-gap: 20px;*/ /* <-- would also mess things up */
}
.tile {
}
img {
box-sizing: border-box;
display: block;
object-fit: contain;
width: 100%;
height: 100%;
margin: …推荐指数
解决办法
查看次数
为什么我的Grid元素的高度没有正确计算？
我遇到了CSS网格元素的高度问题.我使用的代码是:
.gridContainer {
border: thin solid black;
background: rgba(255, 0, 0, 0.5);
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
width: 100px;
height: 100px;
grid-template-areas: 'windowContentHolder';
}
.gridItem {
grid-area: windowContentHolder;
background: rgba(255, 255, 0, 0.5);
width: 200%;
height: 200%;
}
.content {
background: rgba(255, 0, 0, 0.5);
}<div class="gridContainer">
<div class="gridItem">
<div class="content">hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>
</div>
</div>
</div>如您所见,gridItem设置为height:200%,预期结果不符合预期.它应该是200px父(100px)的两倍(),滚动条隐藏任何额外的高度,而高度属性似乎根本没有设置.
似乎百分比正在考虑子高度而不是父高度,因为如果我们仔细检查元素,我们将看到它的高度是子元素高度的两倍.
带有'hi'的元素没有像预期的那样溢出.更改gridContainer为'block'确实可以正常工作,但不能使用'grid':
.gridContainer {
border: thin solid black;
background: rgba(255, 0, …推荐指数
解决办法
查看次数
嵌套的CSS网格隐式填充父网格的剩余高度
我试图让一个子CSS网格尊重父网格的尺寸.我怎么能这样做？
我最初写的是这样的:https: //codepen.io/anon/pen/XVExrj
CSS:
.site,
body,
html {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
.parent-grid {
display: grid;
height: 300px;
width: 300px;
grid-template-rows: 30px 1fr;
grid-template-columns: 1fr;
grid-template-areas: 'nav' 'child';
background-color: grey;
}
.nav {
background-color: #0D47A1;
grid-area: nav;
}
.child {
grid-area: child;
}
.child-grid {
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 1fr;
grid-template-areas: 'test';
background-color: grey;
}
.content {
background-color: red;
overflow: auto;
grid-area: test;
}
* {
box-sizing: border-box;
}HTML
<div class="parent-grid"> …推荐指数
解决办法
查看次数
CSS网格自动调整大小的行内容溢出
我在实现嵌套网格结构时遇到了问题。这是一个简化的例子。正如你所看到的，嵌套结构给出了外部结构的高度，从而在身体之外生长。我想要实现的是使.content__inner元素，并且只有该元素可滚动。其他一切都应该在视口内。我怎样才能做到这一点？
编辑 1： 只是为了澄清，我在身体上使用 100vh，但不想将它设置在容器上。容器应该具有其父级的高度，无论它是什么。
body {
display: block;
height: 100vh;
width: 100%;
background-color: white;
margin: 0;
}
.container {
max-height: 100%;
display: grid;
grid-template-areas: "header header" "side content" "footer footer";
grid-template-columns: 50px auto;
grid-template-rows: min-content minmax(min-content, max-content) min-content;
}
.header {
grid-area: header;
background-color: rgba(255, 255, 0, 0.3);
}
.side {
grid-area: side;
background-color: rgba(0, 255, 0, 0.3);
}
.content {
grid-area: content;
background-color: rgba(0, 0, 255, 0.3);
}
.overflow {
overflow: auto;
}
.content-item …推荐指数
解决办法
查看次数