网页图片并不保持直线

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;创建了弹性框，flex-wrap: wrap;告诉它变形。请注意我已删除float:left