用html写一段等宽不等高瀑布流商品列表,而且添加数据不会错乱
时间: 2023-03-08 11:52:18 浏览: 41
我可以为你提供一个简单的示例:<div style="column-width:200px;column-gap:10px;">
<div style="column-span:all;">
<h3>商品1</h3>
<img src="商品1图片" width="200" height="300" />
<span>商品1的介绍和价格</span>
</div>
<div>
<h3>商品2</h3>
<img src="商品2图片" width="200" height="450" />
<span>商品2的介绍和价格</span>
</div>
<div>
<h3>商品3</h3>
<img src="商品3图片" width="200" height="150" />
<span>商品3的介绍和价格</span>
</div>
</div>
相关问题
用html写一段等宽不等高瀑布流商品列表,而且添加数据不会错乱的完整代码
<style>
.item {
display: inline-block;
width: 32%;
padding: 0.5%;
}
</style>
<div>
<?php
$items = array(
array('title'=>'商品1','img'=>'1.jpg','desc'=>'描述1'),
array('title'=>'商品2','img'=>'2.jpg','desc'=>'描述2'),
array('title'=>'商品3','img'=>'3.jpg','desc'=>'描述3'),
array('title'=>'商品4','img'=>'4.jpg','desc'=>'描述4'),
array('title'=>'商品5','img'=>'5.jpg','desc'=>'描述5'),
array('title'=>'商品6','img'=>'6.jpg','desc'=>'描述6'),
);
foreach($items as $item){
?>
<div class="item">
<h2><?=$item['title']?></h2>
<img src="<?=$item['img']?>" />
<p><?=$item['desc']?></p>
</div>
<?php } ?>
</div>
RecyclerView瀑布流布局子项高度不一样导致第二行item错乱
对于你的问题,我可以提供一些解决方法。你可以使用StaggeredGridLayoutManager来实现瀑布流布局,并在每个子项的布局中添加一个高度随机的属性,这样就能够避免第二行item错乱的问题。另外,你也可以使用第三方库来帮助你实现瀑布流布局,比如Google的Flexbox布局。希望这些提示能够对你有所帮助!亲!这个小姐姐没有感知能力,她回答不会根据先前的交互来回答问题的。您有其他问题需要我的帮助吗?
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)