0

我的页面有一个包含 4 个列表项的无序列表，在我的演示中由 4 个绿色框表示。每行最多应该有 3 个列表项（框），但由于我的演示有 4 个列表项，所以第 4 项被推送到新行。这会导致第 4 项扩展父容器的整个宽度。

发生这种情况是因为 list_item_inner 填充了其父项 (list_item) 宽度的 100%，假设为 32%（与其他人一样），但它显然与它上面的绿色框的大小不同。我只需要所有列表项具有相同的宽度，无论一行是否只有 1 个。

这是我的演示网站

这是列表项的 html 代码：

      <li class="list__item">
<figure class="list__item__inner">
<a class="divLink" href="http://google.com">
<p class="vignette" style="background-image:url(http://www.albertelli.com/photoarchive/Random_2001/house_medium.jpg)"></p>
<div class="titlebox">Test </div>
<div class="locationbox">Test</div>
        <div class="pricebox">Test</div>
     </a>
    </li>

所有 CSS 代码都在 html 文档中。有什么解决办法吗？谢谢！

如果相关，页面使用 FlexWrap webkit，脚本：

<script>

;( function( $, window, document, undefined )
{
    'use strict';

    var s = document.body || document.documentElement, s = s.style;
    if( s.webkitFlexWrap == '' || s.msFlexWrap == '' || s.flexWrap == '' ) return true;

    var $list       = $( '.list' ),
        $items      = $list.find( '.list__item__inner' ),
        setHeights  = function()
        {
            $items.css( 'height', 'auto' );

            var perRow = Math.floor( $list.width() / $items.width() );
            if( perRow == null || perRow < 2 ) return true;

            for( var i = 0, j = $items.length; i < j; i += perRow )
            {
                var maxHeight   = 0,
                    $row        = $items.slice( i, i + perRow );

                $row.each( function()
                {
                    var itemHeight = parseInt( $( this ).outerHeight() );
                    if ( itemHeight > maxHeight ) maxHeight = itemHeight;
                });
                $row.css( 'height', maxHeight );
            }
        };

    setHeights();
    $( window ).on( 'resize', setHeights );
    $list.find( 'img' ).on( 'load', setHeights );

})( jQuery, window, document );

</script>

这是一个屏幕截图，显示列表项 4 的大小与其他项不同。 在此处输入图像描述

4

2 回答 2

1

将 CSS 宽度属性更改为最大宽度：

.list__item {
    max-width: 32%;
}
于 2015-02-07T01:40:25.540 回答
0

我看不到结束数字标签。所以它应该是这样的：

<li class="list__item">
    <figure class="list__item__inner">
        <a class="divLink" href="http://google.com">
            <p class="vignette" style="background-image:url(http://www.albertelli.com/photoarchive/Random_2001/house_medium.jpg)"></p>
            <div class="titlebox">Test </div>
            <div class="locationbox">Test</div>
            <div class="pricebox">Test</div>
        </a>
    </figure>
</li>
于 2015-04-01T19:51:04.087 回答