Question

我试图在以下结构中获取我的列表

 -- 48           -- l
 -- 50           -- xl
 -- 52

但它在我的网站上显示如下

 -- 48           -- 50
 -- 52           -- l
 -- xl

这是Jsfiddle更清晰，任何人都可以弄清楚我做错了什么？

修改
以下是按要求生成列表的方式

<?php foreach ($this->getItems() as $_item): ?>
    <?php if($_item->getName() == "Maat" || $_item->getName() == "maat"): ?>
        <li <?php if(is_numeric($_item->getLabel())):?> class="number"<?php else:?>class="no-number"<?php endif; ?> >
    <?php else: ?>
        <li>
    <?php  endif; ?>
    <?php if ($_item->getCount() > 0): ?>
        <?php $id= $_item->getValue();?>
        <?php $category = Mage::getModel('catalog/category')->load($id) ?>

        <?php if($_item->getName() == "Categorie"): ?>
          <div class="checkdiv" id="checkdiv<?php echo $_item->getValue() ?>" onclick="setLocation('<?php echo $this->urlEscape($category->getUrl()) ?>')">
            <input type="checkbox" id="<?php echo $_item->getValue() ?>">
        </div>
        <?php else: ?>
        <div class="checkdiv" id="checkdiv<?php echo $_item->getValue() ?>" onclick="setLocation('<?php echo $this->urlEscape($_item->getUrl()) ?>')">
            <input type="checkbox" id="<?php echo $_item->getValue() ?>">
        </div>
        <?php endif;?>
        <span class="labelholder">
            <?php if($_item->getName() == "Kleur"): ?>
                <?php 
                    $kleur = strtolower($_item->getLabel()); 
                    $kleur = str_replace('-', '', $kleur);
                    $kleur = str_replace(' ', '', $kleur);
                ?>
            <img src="<?php echo $this->getSkinUrl('images/kleuren/'.$kleur.'.png') ?>" id="kleur_img" />
            <?php endif;?>
            <label for="<?php echo $_item->getValue() ?>"><?php echo $_item->getLabel() ?></label>
                <?php if ($this->shouldDisplayProductCount()): ?>
                <span class="count"><?php echo $_item->getCount() ?></span>
        </span>
        <?php endif; ?>
    <?php else: ?>
        <span>
            <?php echo $_item->getLabel(); ?>
            <?php if ($this->shouldDisplayProductCount()): ?>
                <span class="count"><?php echo $_item->getCount() ?></span>
            <?php endif; ?>
        </span>
    <?php endif; ?>
</li>
<?php endforeach ?>

在此代码段中，所有Magento Store属性都被提取并显示在分层导航的前端

Answer 1

修复（黑客）：http://jsfiddle.net/vimxts/xdo4owk0/1/

请参阅下面的新答案

<击>

.wrapper {
    height:300px;
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
}

添加自定义高度的包装（限制项目的放置方式），然后手动指定列号。

同时在<li>上显示块。

这是一个片段：

.wrapper {
    height:300px;
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
}

li{list-style:none;display:block;}
li {
margin-bottom: 10px;
margin-left: 20px;
}
.checkdiv {
display: block;
width: 12px;
height: 12px;
float: left;
background-color: #FFF;
border: 1px solid #b5b5b5;
border-radius: 3px;
}
.checkdiv input {
display: none;
}

.labelholder {
margin: 10px;
color: #4c4c4c;
}

label {
display: inline-block;
font-size: 13px;
font-family: "Raleway", "Helvetica Neue", Verdana, Arial, sans-serif;
font-weight: 600;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
user-select: none;
}

.number {
width: 40%;
float: left;
}

.no-number {
float: left;
width: 40%;
clear: right;
}

<div class="wrapper">
<li class="number">
    <div class="checkdiv" id="checkdiv61">
        <input type="checkbox" id="61"/>
    </div> 
    <span class="labelholder">
        <label for="61">48</label>
        <span class="count">2</span>
    </span>
</li>

<li class="number">
    <div class="checkdiv" id="checkdiv60">
        <input type="checkbox" id="60"/>
    </div> 
    <span class="labelholder">
        <label for="60">50</label>
        <span class="count">2</span>
    </span>
</li>

<li class="no-number">
    <div class="checkdiv" id="checkdiv59">
        <input type="checkbox" id="59"/>
    </div> 
    <span class="labelholder">
        <label for="59">52</label>
        <span class="count">3</span>
    </span>
</li>

<li class="number">
    <div class="checkdiv" id="checkdiv58">
        <input type="checkbox" id="58"/>
    </div> 
    <span class="labelholder">
        <label for="58">xl</label>
        <span class="count">2</span>
    </span>
</li>

<li class="no-number">
    <div class="checkdiv" id="checkdiv57">
        <input type="checkbox" id="57"/>
    </div> 
    <span class="labelholder">
        <label for="57">l</label>
        <span class="count">2</span>
    </span>
</li>
</div>

<击>

Answer 2

新答案：实际解决问题：http://jsfiddle.net/vimxts/xdo4owk0/4/

添加了：

JQuery的：

$(function(){
    $(".number").appendTo(".number-list");
    $(".no-number").appendTo(".no-number-list");
    $(".hidden").remove();
})

js轻松解决问题：

将.number复制到号码列表
将.no-number复制到无号码列表
删除PHP生成的列表（请先将类.hidden添加到包装器中）

我删除了一些类样式并添加了一些新类型。

Answer 3

试试这段代码：）

<li class="number">
    <div class="checkdiv" id="checkdiv61">
        <input type="checkbox" id="61"/>
    </div> 
    <span class="labelholder">
        <label for="61">48</label>
        <span class="count">2</span>
    </span>
</li>

<li class="no-number">
    <div class="checkdiv" id="checkdiv57">
        <input type="checkbox" id="57"/>
    </div> 
    <span class="labelholder">
        <label for="57">l</label>
        <span class="count">2</span>
    </span>
</li>

<li class="number">
    <div class="checkdiv" id="checkdiv60">
        <input type="checkbox" id="60"/>
    </div> 
    <span class="labelholder">
        <label for="60">50</label>
        <span class="count">2</span>
    </span>
</li>

<li class="number">
    <div class="checkdiv" id="checkdiv58">
        <input type="checkbox" id="58"/>
    </div> 
    <span class="labelholder">
        <label for="58">xl</label>
        <span class="count">2</span>
    </span>
</li>

<li class="no-number">
    <div class="checkdiv" id="checkdiv59">
        <input type="checkbox" id="59"/>
    </div> 
    <span class="labelholder">
        <label for="59">52</label>
        <span class="count">3</span>
    </span>
</li>

将列表项放在两行中

3 个答案:

修复（黑客）：http://jsfiddle.net/vimxts/xdo4owk0/1/

这是一个片段：

新答案：实际解决问题：http://jsfiddle.net/vimxts/xdo4owk0/4/

JQuery的：