css - 如何覆盖现有的 CSS 让孩子1 有固定的宽度和孩子有父母的剩余宽度吗？

Question

我正在尝试为我们的 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 */
}

Answer 1

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

编辑：
正如您所指出的，为了width:auto工作，您还应该重置float属性，否则宽度不会占用剩余的可用空间。

Answer 2

像这样写：

.question-summary
    {
        background-color: silver;
        overflow:hidden;
    }
    .statscontainer
    {
        float: left;
        width: 86px;    /* child 1: fixed width */
        margin-right: 8px;
        background-color: gray;
    }
    .summary
    {
        overflow:hidden;
        background-color: lightgray;
    }

检查这个http://jsfiddle.net/pGu42/