大佬教程收集整理的这篇文章主要介绍了如何覆盖现有的CSS让孩子1有固定的宽度,孩子有父母的剩余宽度?,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
在标记的问题列表页面(例如:https://stackoverflow.com/questions/tagged/java)中,HTML如下所示
<div class='question-sumMary'> <div class='statscontainer'> <div>n votes</div> <div>n answers</div> <div>n views</div> </div> <div class='sumMary'> <h3>Question title</h3> <div>question excerpt ...</div> <div>tag1 tag2 tagN </div> </div> </div>
原始CSS在父/子1 /子2上使用固定宽度
<style> .question-sumMary { float: left; width: 730px; BACkground-color: silver; } .statscontainer { float: left; width: 86px; margin-right: 8px; BACkground-color: gray; } .sumMary { float: left; width: 635px; BACkground-color: lightgray; } </style>
现在我尝试覆盖CSS以使其适合全屏宽度
.question-sumMary { float: left; width: 100% !important; /* parent: full screen width */ BACkground-color: silver; } .statscontainer { float: left; width: 86px; /* child 1: fixed width */ margin-right: 8px; BACkground-color: gray; } .sumMary { float: left; /* width: 80% !important; <--- how to let child 2 has remaining width ? left: 95px; right: 0px; */ BACkground-color: lightgray; }
问题是,如何让孩子2保持宽度?我知道什么时候使用< table>控制布局,很容易.
<table style='width:100%'> <tr> <td bgcolor='gray' style='width:80px'>fixed width</td> <td bgcolor='lightgray'>automatically has remaining width</td> <tr> </table>
编辑
根据@sandeep和@mrLister的答案,它应该覆盖3个CSS属性才能使其工作
.question-sumMary .sumMary { width: auto !important; /* original = width: 735px; */ float: none !important; /* original = float: left; set to 'none' to get the 'overflow' property work */ overflow: hidden !important; /* original = not set,default is visible */ }
以上是大佬教程为你收集整理的如何覆盖现有的CSS让孩子1有固定的宽度,孩子有父母的剩余宽度?全部内容,希望文章能够帮你解决如何覆盖现有的CSS让孩子1有固定的宽度,孩子有父母的剩余宽度?所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。