CSS   发布时间:2022-04-17  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了如何覆盖现有的CSS让孩子1有固定的宽度,孩子有父母的剩余宽度?大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试为StackExchange网站编写Firefox时尚css(全屏宽度样式).

在标记的问题列表页面(例如: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 */
}

解决方法

您应该将宽度重置为其初始值,即auto.

编辑:正如您所注意到的,为了使width:auto工作,您还应该重置float属性,否则宽度将不占用剩余的可用空间.

大佬总结

以上是大佬教程为你收集整理的如何覆盖现有的CSS让孩子1有固定的宽度,孩子有父母的剩余宽度?全部内容,希望文章能够帮你解决如何覆盖现有的CSS让孩子1有固定的宽度,孩子有父母的剩余宽度?所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。