html 如何让div中的项目显示在一行中，拉伸以适应整个父div，当屏幕缩小时堆叠，但保持所有项目的大小相同？

s4n0splo 于 2022-12-09 发布在其他

关注(0)|答案(1)|浏览(127)

我有一个div，其中包含奇数张类似div牌（i.e.3）。我希望卡片divs在全屏上排成一行，并伸展到整个屏幕。当最小化时，我希望它们堆叠。当卡片走到一列时，它们看起来完全没问题，每张卡片伸展到整个屏幕。问题是，当方向第一行2张卡片，第二行1张时，第三张卡片占据了整行，而不是保持与其他卡片（即图片）相同的大小。在这种情况下，我希望第三项与第二项大小相同。

html文件
第一个
css文件

.outside{
    width: 100%;
    border: 2px solid black;
    margin: 0 0 -20px;
  
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;  
}

.item {
  border: 1px solid blue;
  padding: 20px;
  margin: 16px;
  min-width: 260px;
  
  flex:1;
}

我搞砸了CSS，尝试了各种各样的东西，但似乎找不到一个简单的解决办法，似乎应该有一个存在的问题。

Html

来源：https://stackoverflow.com/questions/74719728/how-to-get-items-in-a-div-to-show-in-a-row-stretch-to-fit-the-entire-parent-div

1条答案

按热度按时间

thigvfpy1#

您没有为“outside”类使用任何样式（或者没有上传它们）。您可以在该类中使用flexbox选项，这样类中的项目就可以正确地设置样式。您可以这样做：

.body{
    width: 100%;
    border: 2px solid black;
    margin: 0 0 -20px;
}

.outside {
    width: 100%; /* To span the entire width of the body */
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;      
}

.item {
  border: 1px solid blue;
  padding: 20px;
  margin: 16px;
  min-width: 260px;
}

赞(0）回复(0）举报 2022-12-09

我来回答

html 如何让div中的项目显示在一行中，拉伸以适应整个父div，当屏幕缩小时堆叠，但保持所有项目的大小相同？

1条答案

相关问题

热门标签

最新问答