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