需要設置寬度取決於其內容

我需要設置div的寬度取決於其內容。以下是我的HTML流。需要設置寬度取決於其內容

流1：

<div id="header-cart" class="block block-cart skip-content skip-active"> 
<div class="minicart-wrapper"> 
<p class="block-subtitle"></p> 
<p class="empty">You have no items in your shopping cart.</p> 
</div> 
</div>

流程2：

<div id="header-cart" class="block block-cart skip-content skip-active"> 
<div class="minicart-wrapper"> 
<p class="block-subtitle"></p> 
<div> 
<div id="minicart-widgets"> </div> 
<div class="block-content"></div> 
<div class="minicart-actions"></div> 
</div> 
</div> 
</div>

我有上面所解釋的兩個HTML流.. 我需要的是設置

寬度220px和300px

爲

<div id="header-cart">

。

當存在的<p class="empty"> in <div id="header-cart">

<div id="header-cart">的次數應在

寬度220px

。

如果不是，它應該在300px。

我不知道如何設置這個級聯的流量。

任何人都可以幫助我？在此先感謝..

來源

2014-11-03 Syed Ibrahim

U可以使用jquery或js來檢查類是否爲空 – 2014-11-03 07:00:25

CSS中沒有父選擇器，即使在CSS3中也沒有。所以這是不可能的，只能通過HTML和CSS – 2014-11-03 07:06:19

是的，那麼沒有JS是不可能的，因爲你要求改變基於子的父類的寬度。 – 2014-11-03 07:07:50

您可以使用JavaScript來做到這一點。

if(document.querySelectorAll("div#header-cart p.empty").length==0){ 

    document.getElementById('header-cart').style.width="300px"; 

}else{ 

    document.getElementById('header-cart').style.width="220px"; 

}

來源

2014-11-03 07:02:21

未在Js中標記 – 2014-11-03 07:03:53

可能是OP忘了標記Javascript。 – 2014-11-03 07:05:09

nopes我需要做的只有在CSS？有沒有可能做到這一點，而不使用JS？ – 2014-11-03 07:05:25

通過查看你的上面的代碼，我覺得沒有必要去爲這個任何腳本。你可以通過現有的css類來獲得相同的結果。

流1：

默認類應用。所以，給這個類的基本寬度。

.skip-content { width: 220px; }

流程2：

活動類應用。所以，給這個類的活動類寬度。

.skip-active { width: 300px; } // This will be applied in active time.

來源

2014-11-03 07:06:21

這兩個流程都不會出現兄弟，.skip-content和.skip-active。 – 2014-11-03 07:27:34

我認爲這可以通過stylign在線

<div id="header-cart" class="block block-cart skip-content" style="width:220px;"> 
<div class="minicart-wrapper"> 
<p class="block-subtitle"></p> 
<p class="empty">You have no items in your shopping cart.</p> 
</div> 
</div> 

<div id="header-cart" class="block block-cart skip-content skip-active" style="width:300px;"> 
<div class="minicart-wrapper"> 
<p class="block-subtitle"></p> 
<div> 
<script type="text/javascript"> 
<div id="minicart-widgets"> </div> 
<div class="block-content"></div> 
<div class="minicart-actions"></div> 
</div> 
</div>

完成或進行其他DIV流量1和2這樣

<div id="flow1"> 
<div id="header-cart" class="block block-cart skip-content"> 
<div class="minicart-wrapper"> 
<p class="block-subtitle"></p> 
<p class="empty">You have no items in your shopping cart.</p> 
</div> 
</div> 
</div> 

<div id="flow2"> 
<div id="header-cart" class="block block-cart skip-content skip-active"> 
<div class="minicart-wrapper"> 
<p class="block-subtitle"></p> 
<div> 
<div id="minicart-widgets"> </div> 
<div class="block-content"></div> 
<div class="minicart-actions"></div> 
</div> 
</div> 
</div> 
</div>

CSS：

#flow1 {width:220px;} 
#flow2 {width:300px;}

樣本 - http://jsfiddle.net/wd54paav/

來源

2014-11-03 07:07:33 MIke

沒有兄弟，這些流動應該是動態的。我們無法將其設置爲預定義。分析這個函數的唯一來源是通過

。沒有其他選項可用。 – 2014-11-03 07:25:27

嘗試使用此CSS div＃header-cart .block block-cart skip-content {width：220px;} div＃header-cart .block block-cart skip-content skip-active {width：300px;}我認爲這是可能通過結合ID與類參考： http://stackoverflow.com/questions/1028248/how-to-combine-class-and-id-in-css-selector – MIke 2014-11-03 07:54:06

需要設置寬度取決於其內容

回答

相關問題