我的页面有一个包含4个列表项的无序列表,在我的演示中由4个绿色框表示。每行最多应有3个列表项(框),但由于我的演示有4个列表项,因此第4项被推到新行。这会导致第4项扩展父容器的整个宽度。
这是因为list_item_inner正在填充其父级(list_item)宽度的100%,假设为32%(与其他人一样),但它的大小显然与它上面的绿色框。我只需要所有列表项具有相同的宽度,无论是否只有1行。
这是我的demo site
这是列表项的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与其他列表的大小不同。
答案 0 :(得分:1)
将CSS width属性更改为max-width:
.list__item {
max-width: 32%;
}
答案 1 :(得分: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>