html – max-width不适用于table-cell
发布时间:2020-12-14 19:45:16 所属栏目:资源 来源:网络整理
导读:对我来说,预期的行为是,只要容器的宽度不超过500px,中间单元就会水平填充整个空间.但是,无论我缩放页面的大小,中间单元格总是填满100%,忽略max-width属性,巧克力永远不会显示:( div.container { width: 100%; display: table;}div.container * { display: t
对我来说,预期的行为是,只要容器的宽度不超过500px,中间单元就会水平填充整个空间.但是,无论我缩放页面的大小,中间单元格总是填满100%,忽略max-width属性,巧克力永远不会显示:(
div.container { width: 100%; display: table; } div.container > * { display: table-cell; } div.middle { width: 100%; max-width: 500px; background-color: black; } div.side { width: auto; background-color: chocolate; } <div class="container"> <div class="side"></div> <div class="middle">.</div> <div class="side"></div> </div> 导致问题的原因是什么,以及可能的解决方法是什么? 解决方法
我想现在你的理由很清楚,所以我只是建议你解决这个问题.通过使用display:block / inline-block;而不是display:table / table-cell;.
所以解决方案是: div.container { width: 100%; display: block; /* Changed from display:table; */ } div.container > * { display: inline-block; /* Changed from display:table-cell; */ float:left; /* Added floating to avoid space between elements */ } div.middle { width: 100%; max-width: 500px; background-color: black; } div.side { width: auto; background-color: chocolate; } <div class="container"> <div class="side">Left</div> <div class="middle">.</div> <div class="side">Right</div> </div> Working : Fiddle 更新方案: 找到了解决方案 回到表格可以通过给表格布局:固定;到容器. Working Demo HTML <div class="container"> <div class="side">Left</div> <div class="middle">.</div> <div class="side">Right</div> </div> CSS html,body { width:100%; height:100%; margin:0; padding:0; } .container { display:table; width:100%; height:10px; table-layout:fixed; } .side,.middle { display:table-cell; text-align:center; vertical-align:middle; } .middle { width:500px; background:black; } .side { width : calc(50% - 500px); overflow:hidden; background:chocolate; } @media (max-width: 500px) { .side { display:none; } .middle { width:100%; } } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |