2

次の HTML では、 にdiv が.leftある場合のみの幅を指定し、そうでない場合は全幅にする必要があります。たとえば、div がある場合、その幅は300px である必要があり、そうでない場合は 500px である必要があります。.right.wrapper.right.left

これは css+セレクターを使用して実行できると思いますが、.left.

<div class="wrapper">
    <div class="left"></div>
    <div class="right"></div>
</div>

.wrapper{
    width: 500px;
}

.left{
    width: 300px;
}

.right{
    width: 200px;
}
4

4 に答える 4

7

:only-child セレクターを使用できます

.left:only-child
{
  width: 100%;
}

例

:only-child セレクターを使用したくない場合は、次を試すことができます

.wrapper
{
  width: 500px;
  min-height: 50px;
}

.left {
    overflow: hidden;
    min-height: 50px;
    border: 1px dashed #f00;
}

.right {
    float: right;
    width: 200px;
    min-height: 50px;
    border: 1px dashed #00f;
}

例

于 2013-01-07T08:57:25.190 に答える
3

これにCSSを使用する代わりに、HTMLファイルを使用しないのはなぜですか？

あなたの質問から、あなたは異なるHMTLファイル/出力を持っているようです。HTMLファイルに異なるクラスを追加する場合は、CSSで直接それらをターゲットにすることができます。

<div class="wrapper">
    <div class="left"></div>
    <div class="right"></div>
</div>

と

<div class="wrapper">
    <div class="full"></div>
</div>

CSSには次のようなものが含まれます。

.wrapper {
    width: 500px;
}

.left {
    width: 300px;
}

.right {
    width: 200px;
}

.full {
    /* Whatever is required for full width */
}

この方法ではるかに簡単です！（HTMLファイル/出力を変更できると仮定します）

于 2013-01-07T08:48:17.517 に答える
1

CSSが要素が存在するかどうかを検出する方法はありません。それは、要素の表示のみを目的としています。

ただし、javascriptを使用してこれを行うことができます。jQueryバージョンを紹介します。

あなたは要素を持っています：

<div id="one">
  My diiiv.
</div>

そして、この要素が存在する場合、あなたは何かをしたいです：

$.fn.exists = function(callback) {
  var args = [].slice.call(arguments, 1);

  if (this.length) {
    callback.call(this, args);
  }
  return this;
};

これは、呼び出されたときに要素が存在するかどうかを判別する関数です。

ここでできることは、要素が存在するかどうかをテストすることです。

$('div#one').exists(function() {
  this.append('<p>I exist!</p>');
});

したがって、もしそうなら、あなたはあなたが望む方法でDOMを拡張することができます。CSSはこれを行うことができません、それがjavascriptとそのライブラリの目的です:)

http://jsfiddle.net/5Q2Gm/

于 2013-01-07T08:54:14.380 に答える
1

HTML出力を制御する場合は、Vegerのソリューションも使用します。そうでない場合、+セレクターは後者の要素に対してのみ機能するため、左の div が存在する場合.left + .rightは右の div を変更できます。それは逆には機能しません。

ご存知の場合は、常に左の div があり、右の div を左の div に配置して、幅 200px で右にフロートさせることができます。

于 2013-01-07T08:52:03.890 に答える