6

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 */
}
4

2 に答える 2

5

幅を初期値である にリセットする必要がありautoます。

編集:
ただし、ご指摘のとおり、width:auto動作させるには、プロパティもリセットする必要がありfloatます。そうしないと、幅が使用可能なスペースの残りを占有しません。

于 2012-06-25T10:45:37.003 に答える
4

次のように書きます。

.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/

于 2012-06-25T10:45:16.663 に答える