如果存在其他div，則div的CSS寬度爲

在下面的HTML中，我只想指定.left的寬度，如果.wrapper中存在.right div，否則應取全寬。例如，如果存在.right格，那麼.left的寬度應該是300px，否則應該是500px。如果存在其他div，則div的CSS寬度爲

我認爲這可以通過使用css +選擇器來完成，但如果我不確定如何應用.left。

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

.wrapper{ 
    width: 500px; 
} 

.left{ 
    width: 300px; 
} 

.right{ 
    width: 200px; 
}

來源

2013-01-07 user1251698

沒有辦法檢測元素是否存在與CSS。你將不得不使用JavaScript來做到這一點。在jQuery中，您可以使用.length == 1方法。 – Kyle

你有沒有嘗試過使用寬度：100％左邊的div？它是如何工作的？ – Sonhja

您可以使用：獨生子女選擇

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

Example

如果你不這樣做想要使用：獨生子選擇器，您可以嘗試以下內容

.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; 
}

Example

來源

2013-01-07 08:57:25

偉大的解決方案！不支持在舊瀏覽器上，但擰螺絲使用舊瀏覽器的人;） – Gijs

@Gijs另一種做法是將包裝類的「display」設置爲「table」和「display」把左邊和右邊的類放到''table-cell''中。我不認爲這將在IE6和IE7，但在其他瀏覽器的舊版本 – 2013-01-07 14:31:47

這也是如此，但我仍然喜歡你唯一的孩子建議更好:) – Gijs

而不是使用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-07 08:48:17 Veger

如果你控制HTML輸出，我會去找Veger的解決方案。如果不是，+選擇器只適用於後者，因此.left + .right如果存在左div，則可以更改右分區。反過來也不行。

如果你知道，你會總是有左格，你可能把正確的div到左格，並讓它浮動權具有200像素的寬度。

來源

2013-01-07 08:52:03 Paul

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-07 08:54:14 Kyle

如果存在其他div，則div的CSS寬度爲

回答

相關問題