Question

在我的下面的代码中，我有li，其中我有div，我想在另一个下面显示，所以每个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>

的style.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。此方法还具有在旧版本中工作的额外好处。

编辑：我查了一下列属性，看起来你错过了列的宽度。

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

添加它也可以在不需要浮点数的情况下解决问题，但在IE 8和9中不受支持，所以由您决定。

李中的div不是以块为单位，而是在另一个之下

1 个答案: