开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

为什么我的显示器没有:table-cell元素填充可用空间？

在CSS布局中，:table-cell元素的填充空间取决于其父元素的布局方式。如果父元素没有正确地设置为display: table，那么:table-cell元素将无法正常工作。

以下是一些建议，以确保:table-cell元素正确填充可用空间：

确保父元素的display属性设置为table。
确保:table-cell元素的display属性设置为table-cell。
如果需要，可以为父元素设置width和height属性，以确保其具有足够的空间来容纳:table-cell元素。
如果需要，可以为:table-cell元素设置width和height属性，以确保其具有足够的空间来容纳其内容。

以下是一个简单的示例，演示了如何使用:table-cell元素正确填充可用空间：

<!DOCTYPE html>
<html>
<head><style>
.table {
  display: table;
  width: 100%;
  height: 100%;
}

.table-cell {
  display: table-cell;
  width: 50%;
  height: 50%;
  border: 1px solid black;
}
</style>
</head>
<body>

<div class="table">
  <div class="table-cell">Cell 1</div>
  <div class="table-cell">Cell 2</div>
</div>

</body>
</html>

在这个示例中，我们使用:table-cell元素创建了一个表格布局，其中两个单元格占据了50%的可用空间。我们还为父元素设置了width和height属性，以确保其具有足够的空间来容纳:table-cell元素。

相关搜索:我如何用ItemsControl和UniformGrid填充可用的空间？为什么没有在我的表格元素周围添加边距填充？Grid的最后一个元素没有占用父元素的所有可用空间如何拉伸两个div元素以填充可用的水平空间？为什么我的if语句函数没有填充我的变量(C)？我的XML没有导出元素。为什么？如何将元素粘贴到视口的顶部并填充视口的可用垂直空间--没有JavaScript？为什么这个AngularJS没有填充我的下拉列表？安卓:为什么我的ArrayAdapter没有被填充？为什么我的字符串右侧没有填充？为什么我的rdebug会话说"***没有可用的源文件"为什么我的拆分没有拆分每个元素？为什么我的通配符属性没有在Snakemake中填充？为什么我的HTML元素的大小没有改变为什么我的div元素没有按预期响应？为什么我的EditorFor日期选择器字段没有填充我的值？为什么我的堆栈视图没有填充我以编程方式添加的视图？为什么这段代码没有用数组填充我的combobox？读取串行端口(已确认与串行显示器通信)时，为什么我的阵列未填充为什么我的span元素没有出现在我的页眉上？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

CSS理解之margin

以上两个例子是比较常见的，没有设置宽高也会自动填充所在容器。若刚才的两个例子，如果设置了width或heigth，自动填充特性就会被覆盖。...上图宽度从填满整个所在的容器到宽度500px，这就产生了剩余空间，图中的剩余空白部分空间width=整个容器宽度-500px，而margin auto 就是为了填充这个空白的尺寸设计的，这就是margin...因为图片是inline水平的，它占据的空间并没有撑满整个容器，如果没有设置宽度值。所以它就不满足margin auto 用来填充剩余空间的条件，因为他根本就没有剩余空间。...这时我们再把li的宽度设置为计算好的386.66666px，就可以实现没有间隙的两端对齐。主要利用了margin负值增加它的空间。...但是对替换元素设置table-cell是可以发生作用的，但平时我们不会给替换元素设置table-cell，这是没有任何意义的，所以记住这点就行。

1.7K2 0

CSS BFC实现多栏自适应布局

一、开篇之言要说web上实现两栏自适应布局的方法，一双手都数不过来。不知大家有没有细想过，为什么这些方法可以实现自适应布局呢？...这就是我们常说的浮躁，保持一颗谦逊的心，细细阅读，你会发现，其中一定有你所没有关注过的地方，所谓三人行必有我师。没错，这句话就是写给你看的，同时也是自我内省与监督。...BFC元素家族与自适应布局面面观理论上，任何BFC元素和浮动搞基的时候，都可以实现自动填充的自适应布局。...大家应该知道，IE6/IE7浏览器下，block水平的元素设置display:inline-block元素还是block水平，也就是还是会自适应容器的可用宽度显示。...因此，如果我们把display:table-cell这个BFC元素宽度设置很大，比方说3000像素。那其实就跟block水平元素自动适应容器空间效果一模一样了。

1.5K4 0

第213天：12个HTML和CSS必须知道的重点难点问题

这个还是容易被忽视的，浮动也是一个大坑，有很多细节。这12个知识点是我个人认为的，下面我们就来看看这12个知识点。 1.怎么让一个不定宽高的 DIV，垂直水平居中?...注意 relative 移动后的元素在原来的位置仍占据空间。 **absolute:绝对定位。...取值：left、right、both 3.2 父元素高度塌陷问题 为什么要清除浮动，父元素高度塌陷解决父元素高度塌陷问题：一个块级元素如果没有设置height，其height是由子元素撑开的。...像素 px 是相对于显示器屏幕分辨率而言的，是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果 px 要换算成物理长度，需要指定精度 DPI。...空元素：即系没有内容的HTML元素，例如：br、meta、hr、link、input、img

2.3K2 0

web前端页面布局学习

p=2 默认未设置定位父元素宽度最大填充父元素，高度正好容纳子元素。...如果子元素左浮动，则宽度仍在容纳子元素的基础上最大填充父元素，高度正好容纳子元素如果子元素右浮动，则宽度正好容纳子元素，高度正好容纳子元素这是因为子元素默认就是独占一行，向左对齐的。...子元素的浮动是基于父元素框体的浮动可以通过CSS clear清除 Display属性 none,inline,block,inline-block,table-cell,flex 每个元素都有一个display...属性，如div的display属性为block(块元素)，而span元素的display属性为inline(行内元素) 行内元素（inline）： 1.没有宽高属性，不会独占一行如span,设置宽高均无用...隐藏元素 display:none;隐藏元素，不保留物理空间 visibility:hidden;隐藏元素，保留物理空间定位值描述 absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位

1K3 0

「资深前端工程师总结」前端面试知识点大全——html篇

渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。...行内语义性元素主要完成web页面具体内容的引用和描述，是丰富内容展示的基础。 meter：表示特定范围内的数值，可用于工资、数量、百分比等。 time：表示时间值。...对象存储空间-表，对象-表中的记录，使用keyPath指定键，使用add()，put()向对象存储空间中存储对象，当存储的对象相同时add报错。...d、提高可用性和改进用户的友好体验； e、有几个新的标签，这将有助于开发人员定义重要的内容； f、可以给站点带来更多的多媒体元素(视频和音频)； g、可以很好的替代Flash和Silverlight；...flex 即弹性，会自动填充剩余空间，子容器的伸缩比例由 flex属性确定。单独设置子容器如何沿交叉轴排列：align-self 如果子容器和父容器同时设置了该值，以子容器为准。

1.9K3 1

display属性，及其区别

block: 单独占一行 inline-block: 像inline一样放置(比如和它相邻的元素处在同一行)，像block一样表现。 none: 隐藏该区域，不占实际空间。...text/css"> div{ width: 300px; /*无效*/ height: 300px; /*无效*/ background-color: #CA6666; /*因没有内容填充所以没有显示出背景颜色...margin-bottom: 100px; /*无效*/ margin-left: 100px; margin-right: 100px; border: 1px solid #CB5757; /*因没有内容填充所以只显示出...，多个块级元素则换行显示 display：inline-block的元素为什么可以设置宽高？...于是，值为block的元素实际由外在的“块级盒子”和内在的“块级盒子”组成，值为inline-block的元素则由外在的“内联盒子”和内在的“块级盒子”组成，值为inline的元素则内外均是“内联盒子”

1.3K1 0

css布局 - 两栏自适应布局的几种实现方法汇总

但是大的思想结构和模型有了以后，再往里边填充细节就比较好说了。...二、absolute - 定位实现有了第一种浮动流的思想启示，我们可以想到，既然浮动元素不占据父元素流体空间，从而让文案部分通过block自适应，达到了占据父元素的全部空间的效果。...那么另一种，通过绝对定位让左边元素漂浮起来，而不占用父元素流体空间，是不是也就可以实现这种效果了呢？!...六、table-cell - 伪表格布局有了table老人家的启发，让我想起来css中还有一个属性display，他的值是可以仿造table的。...对于这几种方案的兼容性或者坑点没有完整深入的研究。欢迎遇到过坑的你提个成熟的建议。另外，css真的相当灵活有趣，每一个方法中css的属性不一定非要是我列举的这几条。

1.8K2 0

CSS深入理解学习笔记之vertical-align

2、vertical-align起作用的前提　　应用于inline水平以及“table-cell“元素。　　默认状态下支持vertical-align的元素：图片、按钮、文字和单元格。　　...table-cell的vertical-align只会作用在自身，对子元素设置vertical-align是没有意义的： ?...vertical-align:top 　　　　定义：①inline/inline-block元素：元素顶部和整行的顶部对齐；②table-cell元素：单元格顶padding边缘和表格行的顶部对齐。...vertical-align:middle 　　　　定义：①inline/inline-block元素：元素的垂直中心点和父元素基线往上1/2x-height处对齐；②table-cell元素：单元格填充盒子相对于外面的表格行居中对齐...定义：提高/降低盒子的基线到父级合适的上/下标基线位置。 7、vertical-align前后不一的行为机制　　应用： ? 　　注：关注当前元素和父级，前后并没有直接影响。

1.1K5 0

css布局 - 垂直居中布局的一百种实现方式（更新中...）

但究竟是因为什么呢？我往图片后边写了一个x辅助理解，这下明白了吧！图片默认是文本基线对其的。文本垂直居中，就到垂直正中间那里。但是图片底部为了与文字底部对其，所以留给顶部的空间就不多了。...没有x的时候会有一个空白的换行节点在捣鬼，这也是为什么单独文字的时候看不出毛病，单独图片使用同样的方法却有问题的原因。 ? 啊，这就是听张鑫旭老师讲课的收获！...红框是我加的before、after等伪类，以显示的让我们看到上下的剩余空间相差多少。这一点真的和之前的图片问题很接近： ?...我把两个例子的代码挪到一个html页面，惊奇的发现，底部剩余空间都是比顶部少4像素！于是，一不做二不休，我直接使用margin负值让元素再之前的基础上向上4像素，竟真的实现了绝对的垂直居中。 ?...（特别说明，第三条系列中的父元素height值只是为了撑开然后填充背景色看的。高度不确定不代表没有高度，所以这里是高度值随意改变，内部子元素永远垂直居中的独秀专场）。那我们派谁打头阵呢？

3.4K1 0

CSS实用技巧（中）

有何作用绝对定位的奇淫技巧 CSS特性 vertical-align为什么时灵时不灵生效条件只能应用在display为inline、inline-block、inline-table、table-cell...平常我们用margin: 0 auto;之所以能够使块级元素水平居中，是因为水平方向元素存在剩余可用空间，而auto平分剩余可用空间，因此就产生居中效果。...而垂直方向不存在剩余可用空间，因此无法垂直居中。...，而auto等分剩余可用空间，可以使元素达到垂直居中效果。...无依赖的绝对定位当绝对定位没有设置四周定位尺寸时，会发生神奇的一幕，当前元素没有相对于最近的非 static 祖先元素定位，而是在当前位置不变，并且当前元素脱离文档流，不占据页面空间。

1.4K4 0

各大公司移动端页面 - 导航的实现

目前来说，移动端的实现方法没有一个统一的标准，大家各自采用自己的实现方法，所以今天就给大家分享一下各大公司移动端页面的实现方法——导航栏给大家分享之前，先说几句话。...效果分析首先这么来实现，省了用浮动，大家都清楚，浮动会带来一系列的问题，用display: table&display: table-cell代替了浮动；另外，有没有发现a标签设置了左边框1px，如果是浮动的话...，伪元素在手机端支持程度没有多大问题，在PC端下就比较麻烦了。...可以决定伸缩项目在伸缩容器中的空间大小。如果每个都设置为1，每个伸缩项目在伸缩容器内都相等。...效果分析 Flexbox布局的主体思想是元素可以改变大小以适应可用空间，当可用空间变大，Flex元素将伸展大小以填充可用空间，当Flex元素超出可用空间时将自动缩小。

1.6K7 0

说说各种居中

同时支持块级和内联极元素 2....通过设定position为absolute，将使div脱离文档流，left、top、right、bottom设置为0，使目标盒填充其父元素的所有可用空间，父元素一般为body，或者position设置为...relative的容器。...2.浏览器需支持CSS3 单元格居中 div{ display: table-cell; height: 300px; vertical-align: middle; text-align...另外，使用单元格来实现垂直居中可以支持多元素同时居中！！！

5412 0

CSS深入理解学习笔记之margin

1、margin与容器尺寸　　元素尺寸：①可视尺寸 clientWidth（标准）；②占据尺寸　　margin与可视尺寸：①适用于没有设定width/height的普通block元素；②只适用于水平方向尺寸...　　margin与占据尺寸：①block/inline-block水平元素均适用；②与有没有设定width/height无关；③适用于水平方向和垂直方向。...可用于页面的上下留白（padding兼容性不好）。 2、margin与百分比单位　　普通元素的百分比：相对于容器宽度计算。　　绝对定位元素的百分比：相对于第一个定位的祖先容器的宽度计算的。...margin的善用实例： 5、理解margin:auto 　　规则：如果一侧是定值，一侧是auto，则auto是剩余空间大小；如果两侧均为auto，则平分剩余空间。　　 ...⑵ margin重叠　　⑶ display:table-cell与margin：display:table-cell/display:table-row等声明的margin无效。

1.3K6 1

第147天：web前端开发中的各种居中总结

缺点：不兼容IE6和IE7 适用场景：子元素数量多，不方便修改父元素的属性，对浏览器版本要求相对较低时使用方法④：绝对定位实现（父元素）position:relative，（子元素）absolute...及以上可用方法⑤：flex+justify-content/margin /*第一种方法*/ .parent{display:flex;justify-content:center;} /*第二种方法...:middle} .parent:after{display:inline-block; vertical-align:middle} 方法③ ：块级元素使用vertical-align的时候，由于对齐的基线是用行高的基线作为标记...为了使用vertical-align, 我们需要设置父元素display:table, 子元素 display:table-cell;vertical-align:middle; /*第一种方法*/ ....parent{display:table} .child{display:table-cell;vertical-align:middle;} 优点：元素高度可以动态改变，不需要css定义，如果父元素有足够空间

4614 0

CSS进阶11-表格table

例如，设置为'display：table-cell'的图像将填充可用的单元格空间，其尺寸可能会影响表格大小算法，如同普通单元格一样。...任何table元素都会自动生成必要的匿名表对象，由至少三个对应于'table'/'inline-table'元素，'table-row'元素和'table-cell'元素的嵌套对象组成。...如果表格比列宽，额外的空间应该分布在列上。如果后续行的列数多于由表列元素table-column elements和第一行确定的数字中的较大值，多余的列不会被渲染。...当“height”属性导致表格变高时，CSS 2.2没有定义多余的空间如何分布。...表格边框与表格边框之间的距离是该表格的边框填充以及相关的边框间距。例如，在右侧，距离是填充右边 + 水平边框间距。

6.6K2 0

冷门布局方法 tabel-cell 的可行性研究

display:table-cell 属性简介 display：table-cell；会使元素表现的类似一个表格中的单元格 td，利用这个特性可以实现文字的垂直居中效果。...同时它也会破坏一些 CSS 属性，使用 table-cell 时最好不要与 float 以及 position: absolute 一起使用，设置了 table-cell 的元素对高度和宽度高度敏感，对...可以实现大小不固定元素的垂直居中。 margin 设置无效，响应 padding 设置。对高度和宽度高度敏感。不要对 display：table-cell 使用百分比设置宽度和高度。...诡异的百分比宽高使用 table-cell 有一个让人很抓狂的地方，那就是他的宽高是不能使用百分比设置的，具体的原因我一直没有找到，只能理解为这是这个属性的特性。希望有知道的老铁告知一声。...没有其他元素 table-cell 的容器会获得它前面的元素在水平方向分配完的全部宽度。2.

5802 0

css笔记 - 张鑫旭css课程笔记之 vertical-align 篇

支持负值的属性： margin letter-spacing word-spacing vertical-align 元素vertical-align垂直对齐的位置与前后元素都没有关系元素vertical-align...垂直对齐的位置与行高line-height没有关系。...对于内联元素，vertical-align和line-height虽然看不见，但实际上到处都是空的inline-block、没有任何文字和图片的元素，或者本身有不为visible的overflow属性...table-cell元素，单元格填充盒子相对于外边的表格行居中对齐字符有下沉特性 bottom：底线 inline/inline-block元素，元素底部和整行的底部对齐 table-cell...元素vertical-align垂直对齐的位置与前后元素都没有关系元素vertical-align垂直对齐的位置与行高line-height没有关系。

2K2 0

前端硬核面试专题之 CSS 55 问

选择没有子元素的元素 :target 选取当前活动的目标元素 :not(selector) 选择除 selector 元素意外的元素 :enabled 选择可用的表单元素 :disabled 选择禁用的表单元素...---- 如果需要手动写动画，你认为最小时间间隔是多久，为什么 ？多数显示器默认频率是 60Hz，即 1 秒刷新 60 次，所以理论上最小间隔为：1/60＊1000ms ＝ 16.7ms。...怎么没有自动往下走呢？footer 说——我不给绝对主义者让位！其实这与 footer 无关，而是因为 container 对 sidebar 的无视造成的——你再长，我还是没感觉。...工作方式：浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。影响浮动会导致父元素无法被撑开，影响与父元素同级的元素。...像素 px 是相对于显示器屏幕分辨率而言的。三、em 特点 em 的值并不是固定的； em 会继承父级元素的字体大小。 em 是相对长度单位。相对于当前对象内文本的字体尺寸。

2K2 0

面试题整理｜45个CSS面试题

大家好，又见面了，我是你们的朋友全栈君。...设备像素”，而这种像素长度和你在显示器上看到的文字屏幕像素无关。...与其他标签之间将没有分配空间。 visibility:hidden 表示该标签不可见，但在页面上为其分配了空间。标签已呈现，只是在页面上看不到。 Q28.CSS的特异性是什么意思？...flex容器的主要特征是能够修改其子项的宽度或高度，以在不同的屏幕尺寸上以最佳方式填充可用空间。采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。...相对relative 元素的位置相对于自身进行了调整，而没有更改布局（因此，如果没有放置元素，将为元素留出一定的空隙）。

4.2K3 0

Html和CSS布局技巧（转）

单列布局水平居中水平居中的页面布局中最为常见的一种布局形式，多出现于标题，以及内容区域的组织形式，下面介绍四种实现水平居中的方法（注：下面各个实例中实现的是child元素的对齐操作，child元素的父容器是...而vertical-align呢，是个比较挑食的家伙，它只喜欢吃果冻，从小吃果冻长大，没有了果冻，它就会闹脾气，对你不理不睬。...我称之为“果冻依赖型元素”，又称之为“inline-block依赖型元素”，也就是说,只有一个元素属于inline或是inline-block（table-cell也可以理解为inline-block水平...我对css-vertical-align的一些理解与认识在使用vertical-align的时候，由于对齐的基线是用行高的基线作为标记，故需要设置line-height或设置display:table-cell..., 媒体查询中可用于检测的媒体特性有width、height和color（等）, 使用媒体查询, 可以在不改变页面内容的情况下, 为特定的一些输出设备定制显示效果。

4.8K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭