大佬教程收集整理的这篇文章主要介绍了html – max-width不适用于table-cell,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
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>
导致问题的原因是什么,以及可能的解决方法是什么?
所以解决方案是:
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>
更新方案:
找到了解决方案
回到表格可以通过给表格布局:固定;到容器.
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%; } }
以上是大佬教程为你收集整理的html – max-width不适用于table-cell全部内容,希望文章能够帮你解决html – max-width不适用于table-cell所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。