美文网首页
网页中2行每行放5个元素

网页中2行每行放5个元素

作者: 欣_m | 来源:发表于2019-08-14 19:21 被阅读0次

用float加%,实现如下效果

1、设外层DIV为logo,在logo中用ul li放置10张图片,每个img下放一个p。

2、设置ul 和 li为float:left;使他们左浮动排列在一起,但是此时并未保证每行5个元素。

3、设置ul为width:100%;保证在不同大小的屏幕小,ul都是铺满全屏的。用text-align:center;使ul居中。

4、设置li为width:20%;注意是设置li的宽度而不是img以此限制每一块li占20%,即一行有5个li。

5、最后设置图片的大小。此时不论图片大小多大,每行都只有5个元素,因为li已经限制了每行只有5个。只不过如果图片太大它们会叠在一起。

相关文章

  • 网页中2行每行放5个元素

    用float加%,实现如下效果 1、设外层DIV为logo,在logo中用ulli放置10张图片,每个img下放一...

  • CSS盒子模型

    盒子模型概念: 盒子模型用来“放”网页中的各种元素 网页设计中的内容如文字,图片等元素,都可以是盒子(div嵌套)...

  • flex-wrap布局最后一行向左对齐

    css,因为i元素没有高度,所以不会撑开containeri元素的数量取决于每行的上限-1,比如你打算一行放5个,...

  • 网页总结

    文档流指的是文档中可现实的对象在排列时所占用的位置。将窗体自上而下分成一行行,并在每行中按从左至右的顺序排 放元素...

  • display:none visibility:hidden

    一,display:none;隐藏元素,不占网页中的任何空间,让这个元素彻底消失;将元素的显示设为无,即在网页中不...

  • 杨氏矩阵搜索算法

    介绍 杨氏矩阵中,每行元素是递增的,每列元素也是递增的。即a[i][j]

  • HTML第一小节第二天

    认识网页 网页主要由文字、图像和超链接等元素构成。当然,除了这些元素,网页中还可以包含音频、视频以及Flash等。...

  • 前端基础-HTML

    1 认识WEB 1.1 网页 网页主要由文字、图像和超链接等元素构成。当然,除了这些元素,网页中还可以包含音频、视...

  • HTML:前端基础 & 认识 Web

    目录 认识 Web 1. 认识网页 网页主要由文字、图像和超链接等元素构成。当然,除了这些元素,网页中还可以包含音...

  • 定位

    position--定位 使用position属性可以将网页中的元素放置在网页中的任何位置。一个元素定位后需要结合...

网友评论

      本文标题:网页中2行每行放5个元素

      本文链接:https://www.haomeiwen.com/subject/ykinjctx.html