css - 网页图片不直

Question

我遇到了一个问题，但我正在创建一个包含五张图片的页面。页面有两个 stylesheets normalize,main。main 是我的自定义样式表。这是页面示例。

我想让这个页面响应，但是当我用小宽度调整浏览器大小时，导航栏和图像不会保持直线，它会像这样显示预览。这些所有图片都是通过无序列表下载页面定位的Sample

Answer 1

我查看了您的 css 并找到了问题的可能原因。它与您使用的 float:left 属性有关。当您使用它时会发生什么，浏览器会尝试将所有内容堆叠到屏幕左侧。在您的情况下，由于其中一个列表项比通常的列表项更长(高度)，因此找不到放置它的空间。在这种情况下，使用 flexbox 会更好。方法如下

   #gallary{
   display: inline-flex;
   flex-wrap: wrap;
   margin:0;
   padding:0;
   list-style-type: none;
   }
   #gallary li{
   width:45%;
   margin:2.5%;
   background-color: #f5f5f5;
   color:#bdc3c7;
   }

相比之下，此代码尝试将元素排列成一行，并且在没有可用空间的情况下，它会扭曲并将其放在它下面。 display: inline-flex; 创建 flexbox ，flex-wrap: wrap; 告诉它变形。请注意，我已经删除了 float:left