ul和li简单语句实现DIV+CSS分两列(多列)布局显示(转)
CSS 实现 简单 显示 语句 布局 div 多列
2023-09-11 14:15:11 时间
显然:UL+LI在布局上比table灵活得多。
比较分两列或者多列显示:
table:你需要在服务器上写一大堆代码判断是不是需要换行,或者切分是不是准确
DIV:你只需要定义好css,剩下的做事情叫交给浏览器吧。
最简单的代码:用ul除以li的宽度=列数
<style type="text/css">
.mycode{ width:300px; height:74px; float:left;}
.mycode ul{ width:280px;}
.mycode li{ width:100px; float:left; display:block;}
</style>
<div class="mycode">
<ul>
<li>博客小子</li>
<li>博客小子</li>
<li>博客小子</li>
<li>博客小子</li>
<li>博客小子</li>
<li>博客小子</li>
</ul>
</div>
不用多说,这个是最精简的代码,请根据你需要修改!
转载请注明来自博客小子,谢谢。
效果:
博客小子 博客小子
博客小子 博客小子
博客小子 博客小子
转自:http://www.blogguy.cn/show-416-1.html
相关文章
- [转] 使用babel-plugin-react-css-modules简化CSS Modules的使用
- CSS To SCSS Converter
- 小程序/CSS实现单行与多行文本溢出显示省略号
- 纯 CSS 实现波浪效果!
- AngularJS动态设置CSS
- 雪碧图的使用方法&css实现矢量小三角
- css文本垂直居中
- css的hover事件,如果点击之后通过js操作样式,hover事件就会失效的处理方法,外部css样式与js的DOM样式谁的权重高?
- css列表样式
- css让文字竖着排列 writing-mode 属性
- css样式实现左边的固定宽度和高度的图片或者div跟随右边高度不固定的文字或者div垂直居中(文字高度超过图片,图片跟随文字居中,反之文字跟随图片居中非table实现)
- CSS实现任意角度扇形
- 浅析现代CSS解决方案:数学函数min、max、clamp、calc及使用vw配合clamp实现响应式布局
- CSS盒模型详解
- CSS属性:定位属性(图文详解)
- HTML+CSS实现(排行榜+棋盘+表格+图片商品列表)
- CSS实现完美垂直居中