html - li 中的 div 不是 block ，即一个低于另一个

Question

在我下面的代码中，我有 li，其中我有 div，我想在另一个 li 下方显示，所以每个 li 都有名称，下面是图片，下面是链接，但它们似乎并排对齐

<article id="container">
<?php
$arg= get_posts(array('post_type' => 'products', 'numberposts' => -1)); 
?>

 <ul id="Content">     
    <?php foreach ( $arg as $post ) :  setup_postdata($post);
        if (!empty($post)){                 
    ?>  
        <li class="pindex">
            <div class="pname"><a href="<?php get_field('url',$post);?>"><?php echo the_title(); ?></a></div>
            <div class="pimg"><a href="<?php get_field('url',$post);?>"><?php the_post_thumbnail('')?></a></div>
            <div class="plink"><a href="<?php get_field('url',$post);?>">CLICK HERE</a></div>
        </li>               
    <?php } endforeach; ?>    
    </ul>
</article> 

样式.css

#container {
    width: 80%;
    margin: 0 auto;
    float:left;
    position: relative;
    margin-left: 30px;
    margin-right: 20px;
    margin-top: 10px;
    margin-bottom:30px;
}

#Content {
   -moz-column-count: 4;
    -moz-column-gap: 10px;
    -webkit-column-count: 4;
    -webkit-column-gap: 10px;
    column-count: 4;
    column-gap: 10px;
     width: auto;
     height:auto;     
}

#Content li.index {
 width: auto;
 height:auto; 
display:block;
position:relative;
}


#Content .pindex .pname, #Content .pindex .pname a{ 
width: auto;
height:auto;
font-weight: bold;
text-decoration:none;
text-align:center;
display:block;
position:relative;
}

#Content .pindex .pimg img , #Content .pindex .pimg img a{      
   width: auto;
   height:auto;
   display:block;
   position:relative;
}

#Content .plink, #Content .plink a{ 
width:auto;
font-weight: bold;
text-decoration:none;
text-align:center;
display:block;
}

Answer 1

问题出在您的列属性上。我以前没有真正使用过这个属性，但它似乎是层叠到列表项的内容。 (尽管如果您的列表项正好是四个列表项的倍数，它似乎可以正常工作。)删除此代码:

-moz-column-count: 4;
-moz-column-gap: 10px;
-webkit-column-count: 4;
-webkit-column-gap: 10px;
column-count: 4;
column-gap: 10px;

将允许所有元素正常流动(在彼此之上)。如果你想让帖子显示在 4 列中，请添加 width: 25%; float: left; 到 #Content li.pindex。请注意，您的 css 中的 pindex 类缺少 p。这种方法还有一个额外的好处，即可以在旧版本的 ie 中工作。

编辑:我查看了列属性，您似乎缺少列的宽度。

-moz-column-count: 4;
-moz-column-width: 100px;
-moz-column-gap: 10px;

-webkit-column-count: 4;
-webkit-column-width: 100px;
-webkit-column-gap: 10px;

column-count: 4;
column-width: 100px;
column-gap: 10px;

添加它也可以在不需要 float 的情况下解决问题，但在 IE 8 和 9 中不受支持，这取决于您。