css

Question

これら 2 つの例の動作が異なる理由がわかりません。HTML と CSS の目的は、単に div を水平方向に整列させ、最後の div (右側) が残りのスペース (コンテナーの残りの幅) を占めるようにすることです。

正しいアイテムに特定の ID を使用する:

<style type="text/css">
#left {
    float: left;
    padding: 0 1cm;
    background-color: #ff0000;
}
#right {
    width: 100%;
    background-color: #00FF00;
}
</style>
<div>
    <div id="left">item 1</div>
    <div id="left">item 2</div>
    <div id="right">last</div>
</div>

:last-child を使用:

<style type="text/css">
#left {
    float: left;
    padding: 0 1cm;
    background-color: #ff0000;
}
#left:last-child {
    width: 100%;
    background-color: #00FF00;
}
</style>
<div>
    <div id="left">item 1</div>
    <div id="left">item 2</div>
    <div id="left">last</div>
</div>

score 3 · Accepted Answer

ID の使い方が間違っています。ID は、ページの一意の要素を表します。これを試して：

HTML

<div class="list">
    <div>item 1</div>
    <div>item 2</div>
    <div>last</div>
</div>

.list div {
    float: left;
    padding: 0 1cm;
    background-color: #ff0000;
}
.list div:last-child {
    width: 100%;
    background-color: #00FF00;
}

編集

継承#rightしていないため、例の表示が異なりfloat: left;ます。その機能を模倣したい場合は、次float: none;のように CSS に追加します。

.list div {
    float: left;
    padding: 0 1cm;
    background-color: #ff0000;
}
.list div:last-child {
    float: none;
    width: 100%;
    background-color: #00FF00;
}

score 1 · Accepted Answer

これら 2 つの例の違いは非常に単純です。

最初の例では、最初の 2 つの要素は左にフロートされ、3 番目の要素は通常のドキュメントフローに配置されます。

2 番目の例では、3 番目の要素もスタイルシートの「#left」ルール (最初のルール) に一致します。つまり、これも左にフロートするように作られています。

3 番目の要素がフローティングされていない場合、1 番目と 2 番目の要素は実際には 3 番目の要素の上に置かれます。3 つすべてがフロートされている場合、オーバーラップしないため、3 番目のラインは 2 番目のラインにシャントダウンされます。

それが理にかなっていることを願っています！

編集: David のコメント (およびその他) によると、複数の同一 ID の使用は無効であることに注意してください。ブラウザは間違いに対して非常に寛容ですが、信頼することはできず、一般的に非常に悪い考えであるため、「機能します」。

HTML で "id=" のすべてのインスタンスを "class=" に置き換え、CSS で "#" を "." に置き換えた場合、それらは完全に正しくなりますが、それでも同じように奇妙な動作をします!

(個人的な注意として、誰かの HTML/CSS の間違った使い方について文句を言わないことは、それを奨励することと同じではありません :p)

score 0 · Accepted Answer

さて、問題の原因についてはほとんど答えが述べられていますが、cssに関して最も簡潔な答えを提供している人は誰もいません。以下は、あなたがやりたいことを達成するための最良の、最も簡潔でサポートされている方法です。

以前に設定した幅をオーバーライドしない限り、divに適用する必要はありません。width:100%その場合でも、を使用するのが最適autoです。
毎回「左」クラスを複製する必要はありません（他のdivマークアップを配置する場合を除く）。これにより、不要なマークアップが削減されます。また、rrowlandが部分的に述べているように、ラッピングクラスを使用してください。将来の柔軟性。
よりサポートされている別の方法で実現できる機能のブラウザサポートが低い場合は、別の方法を使用してください。last-childはまだ完全にはサポートされていないため、最後のアイテムをターゲットにするクラスを定義するだけです。詳細については、最後の子セレクターの使用を参照してください。

したがって、マークアップとcssは次のようになります。

<style type="text/css">
  .cols div {
    float: left;
    padding: 0 1cm;
    background-color: #FF0000;
  }
  .cols .last {
    float: none;
    background-color: #00FF00;
  }
</style>
<div class="cols">
  <div>item 1</div>
  <div>item 2</div>
  <div class="last">last</div>
</div>

それらは微妙な変更であることに気づきましたが、cssを読むことで私が見つけた大きな不満の1つは、不必要な宣言の乱用です。

class="クラスのリストを終了しない..."
float：left
位置：相対

最悪の犯罪者であること。

score 0 · Accepted Answer

たくさんの有益な答えをありがとうございました！

idとclassの誤用に関するコメントに完全に同意します。これは、CSSの経験が不足しているためですが、Webにも同様の例がたくさんあります...

ただし、まだ追加の質問があります。

あなたの訂正により、私の例は次のようになります（：last-childに関する関連コメントを無視します）：

<style type="text/css"> 
.left {
    float: left;
    padding: 0 1cm;
    background-color: #ff0000;
}
.left:last-child {
    float: none;
    background-color: #00FF00;
}
</style>

<div>
    <div class="left">item 1</div>
    <div class="left">item 2</div>
    <div class="left">last</div>
</div>

最後のdivは残りのスペースを埋めますが、このdivが.leftに設定されたパディングを継承しないことに戸惑います。なぜそうなのですか？

score 0 · Accepted Answer

:last-child も好きですが、IE7 以下のようなブラウザーではサポートされていません (バージョンが正しいことを願っています)。

score 0 · Accepted Answer

HTML が無効です...

試す：

<style type="text/css">
#left1, left2 {
    float: left;
    padding: 0 1cm;
    background-color: #ff0000;
}
#right {
    width: 100%;
    background-color: #00FF00;
}
</style>
<div>
    <div id="left1">item 1</div>
    <div id="left2">item 2</div>
    <div id="right">last</div>
</div>

ID はすべて異なる (一意の) 必要があります。同じ名前の ID を複数持つことはできません。有効な ID を使用すると、:last-child を使用した場合と同じように動作するはずです。ただし、:last-child は最新のコーディング方法ですが、IE8 以下ではサポートされていません。

一意の ID の代わりに同じクラスを使用することもできます。

<style type="text/css">
.left {
    float: left;
    padding: 0 1cm;
    background-color: #ff0000;
}
.right {
    width: 100%;
    background-color: #00FF00;
}
</style>
<div>
    <div class="left">item 1</div>
    <div class="left">item 2</div>
    <div class="right">last</div>
</div>

score 0 · Accepted Answer

違いは、2 番目の例では、最後の子が左にフロートされるためです ( のルールセットのため#left)。一方、最初の例では、最後の子はの ID を持たないleftため、ルールの対象にはなりません。

重複した ID をクリーンアップして、必要な効果を示すデモを作成しました: http://jsbin.com/acomaw/1/edit

のような CSS ルールセットk.leftは効果的にコメントアウトされています。プレフィックスを他の 2 つのルールセットに移動しkて、それらすべてがどのように同じ効果を持つかを確認します。

css - :last-child と特定の特定の ID の比較

7 に答える 7

HTML

CSS

編集

Related

Reference