2

通常、2つの要素が並んで配置されているページがあります。このためのいくつかの角度を探求しているにもかかわらず、私たちはそれを機能させることができないようです。JavaScriptの使用を嫌うわけではなく、CSSベースのソリューションが可能であると感じているだけです。CSSだけ（および必要に応じて追加のマークアップ）を使用してelement2、それが単独で表示されるときに中心を作成する方法はありますか？

例

2つの要素が並んでいる場合があります。

<div id="container">
  <div id="element1">content</div>
  <div id="element2">content</div>
</div>

ただし、一部の条件でelement2は、ページにのみ表示されます。例：

<div id="container">
  <div id="element2">content</div>
</div>

4

4 に答える 4

5

純粋な css ソリューションがありますが、7 未満のバージョンの IE では機能しません。兄弟セレクター (+) を認識しないためです。そのため、JavaScript ソリューション (おそらく Dean Edwards のIE7 )を検討することをお勧めします。 . とにかく、CSSの例：

div#element2{
  width:100px;
  margin:0 auto;
}
div#element1{
  width:50px;
  float:left;
}
div#element1 + div#element2{
  width:50px;
  float:left;
  margin:0;
}

重要なのは、div#element1 の直後にある div#element2 を選択する行 div#element1 + div#element2 です。

于 2008-11-05T12:19:10.747 に答える
2

Phil は正しい方向に進んでいたと思いますが、CSSlast-child疑似クラスを使用してみてください。私の知る限り、CSSfirst-childで構造last-childを近似する唯一の方法ifです。

div#container div#element2:last-child {
    width:100px;
    margin:0 auto;
}

div#element1{
    width:50px;
    float:left;
}

div##element2{
    width:50px;
    float:left;
    margin:0;
}

上記の CSS は基本的に、「要素 2 がその親の最後の子要素である場合は、このスタイルのセットを使用し、そうでない場合はこれらの他のスタイルを使用します。

これは IE7 でも動作するはずです。

于 2008-11-05T23:56:01.650 に答える
0

厳密な CSS2 ソリューション:

#container {
    text-align:center;
}
#element1, #element2 {
    display:inline-block;
}

内側の要素は #container 内のインライン テキストのようにレイアウトする必要がありますが、内部のブロックはそのままです。

これは標準の CSS ですが、ブラウザーのサポートを得るにはちょっとしたコツが必要になる場合があります。

于 2008-11-05T23:32:14.100 に答える
0

テーブルはもはや「トレンディ」ではないため、クールなソリューションではありませんが、問題を完全に解決します（つまり、すべての下で）

<style>
    #container {
        margin:0 auto;
        width:100px;
    }

    #container table{
        width: 100%;
        text-align:center;
    }

    #element1{ 
        background-color:#0000ff;
    }

    #element2 {
        background-color: #ff0000;
    }
</style>

<div id=container>
    <table cellspacing=0 cellpadding=0>
        <tr>
            <td id="element1">content</td>
            <td id="element2">content</td>
        </tr>
    </table>
</div>
于 2008-11-05T23:41:32.600 に答える