草庐IT

grid_size

全部标签

html - 如何让 CSS Grid 元素占用剩余空间?

我有一张使用CSS网格布局构建的卡片。左侧可能有图片,右上角有一些文本,右下角可能有按钮或链接。在下面的代码中,如何让绿色区域占用尽可能多的空间,同时让蓝色区域占用尽可能少的空间?绿色应该尽可能地压低蓝色区域。https://jsfiddle.net/9nxpvs5m/.grid{display:grid;grid-template-columns:1fr3fr;grid-template-areas:"onetwo""onethree"}.one{background:red;grid-area:one;padding:50px0;}.two{background:green;gri

html - 如何让 CSS Grid 元素占用剩余空间?

我有一张使用CSS网格布局构建的卡片。左侧可能有图片,右上角有一些文本,右下角可能有按钮或链接。在下面的代码中,如何让绿色区域占用尽可能多的空间,同时让蓝色区域占用尽可能少的空间?绿色应该尽可能地压低蓝色区域。https://jsfiddle.net/9nxpvs5m/.grid{display:grid;grid-template-columns:1fr3fr;grid-template-areas:"onetwo""onethree"}.one{background:red;grid-area:one;padding:50px0;}.two{background:green;gri

html - "background-size: cover"没有覆盖手机屏幕

我的网站上有一个照片背景,使用background-size:cover。它在大多数情况下都有效,但在纵向模式下在我的GalaxyS3上留下了一个奇怪的~30px空白区域。我附上了截图。1px的蓝绿色线条用于说明整个屏幕。似乎背景在社交媒体ul之后立即停止。我通过删除ul和背景将其附加到标语文本的底部来对此进行测试。另外,这是我关于移动端View的CSS:@mediaonlyscreenand(max-width:480px){.logo{position:relative;background-size:70%;-webkit-background-size:70%;-moz-bac

html - "background-size: cover"没有覆盖手机屏幕

我的网站上有一个照片背景,使用background-size:cover。它在大多数情况下都有效,但在纵向模式下在我的GalaxyS3上留下了一个奇怪的~30px空白区域。我附上了截图。1px的蓝绿色线条用于说明整个屏幕。似乎背景在社交媒体ul之后立即停止。我通过删除ul和背景将其附加到标语文本的底部来对此进行测试。另外,这是我关于移动端View的CSS:@mediaonlyscreenand(max-width:480px){.logo{position:relative;background-size:70%;-webkit-background-size:70%;-moz-bac

ASP.NET WebForm中asp:Repeater和UI:Grid数据为空时如何显示表头?

一、asp:RepeaterRepeater控件用于显示被绑定在该控件上的项目的重复列表。Repeater控件可被绑定到数据库表、XML文件或者其他项目列表。 1.1-前台页面代码分类名称图片数排序操作'/>'/>'CssClass="forminputform-control"Visible=''/>'Visible=''>'Visible=''>'Visible=''onkeyup="this.value=this.value.replace(/\D/g,'')"style="width:60px;"onafterpaste="this.value=this.value.replace(/

html - 为什么 box-sizing 在 table 和 div 上的作用不同?

这是HTML:http://jsfiddle.net/jC8DL/1/OuterdivInnerdiv,10pxmargin.Innerdiv,10pxpadding.Same,withbox-sizing:border-boxInnertable,10pxpadding在我的Chrome中看起来像这样:直到最后一个,我想我都明白了。我的Chrome检查器显示表格的计算box-sizing样式是content-box所以我希望它表现得像第二个div,溢出并且看起来很难看。为什么不同?这是否记录在HTML/CSS规范的某处? 最佳答案

html - 为什么 box-sizing 在 table 和 div 上的作用不同?

这是HTML:http://jsfiddle.net/jC8DL/1/OuterdivInnerdiv,10pxmargin.Innerdiv,10pxpadding.Same,withbox-sizing:border-boxInnertable,10pxpadding在我的Chrome中看起来像这样:直到最后一个,我想我都明白了。我的Chrome检查器显示表格的计算box-sizing样式是content-box所以我希望它表现得像第二个div,溢出并且看起来很难看。为什么不同?这是否记录在HTML/CSS规范的某处? 最佳答案

html - Firefox:box-sizing 和 min-height

我不明白:这真的是一个错误还是我只是遗漏了什么?我为HTML文档中的所有div设置了box-sizing:border-box(所有-moz和-webkit当然是前缀)。所以这意味着div的height总是包含它的padding。期望min-height属性的行为类似是合理的。但显然,在Firefox中它没有。我的意思是,当我有一个未设置height(即height:auto)但设置了min-height的div(例如,220px)和padding(例如,10px),它导致div的整体高度为240px而不是Firefox中的220!不过,无论哪种方式,它在Chrome和Opera中都保

html - Firefox:box-sizing 和 min-height

我不明白:这真的是一个错误还是我只是遗漏了什么?我为HTML文档中的所有div设置了box-sizing:border-box(所有-moz和-webkit当然是前缀)。所以这意味着div的height总是包含它的padding。期望min-height属性的行为类似是合理的。但显然,在Firefox中它没有。我的意思是,当我有一个未设置height(即height:auto)但设置了min-height的div(例如,220px)和padding(例如,10px),它导致div的整体高度为240px而不是Firefox中的220!不过,无论哪种方式,它在Chrome和Opera中都保

html - Bootstrap Grid,我需要一个容器吗?

我一直在玩bootstrap3,我注意到如果您在没有容器的情况下使用网格系统,它会变得流畅,有人告诉我我不应该这样做,因为该系统被设计为在容器内。如果我不使用容器类会发生什么?我需要它吗?如果可以,我可以使容器类宽度为100%而不会弄乱Bootstrap的媒体查询,或者是否有任何其他或更好的方法来构建一个流畅的使用bootstrap3进行布局。 最佳答案 更新Bootstrap4在Bootstrap4中,最外层的行也应该包裹在container或container-fluid中,以防止.row上的负边距引起水平滚动>.Bootstr