Question

我需要设置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。

我不知道如何为这个级联设置流量。

任何人都可以帮助我吗？提前谢谢..

Answer 1

您可以使用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";

}

Answer 2

通过查看上面的代码，我觉得没有必要为此编写任何脚本。您可以使用现有的css类来实现相同的目标。

流量1：

默认类正在应用。所以，给这个类的基本宽度。

.skip-content { width: 220px; }

流程2：

活动课正在申请。因此，请为此类提供活动类宽度。

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

Answer 3

我认为这可以通过设计内联

来完成

<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>

或为此流程1和2制作另一个div

<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/

需要设置宽度取决于其内容

3 个答案: