浮动元素自动居中显示
来源：互联网 发布：mysql查询时间最近的 编辑：程序博客网 时间：2024/05/21 09:04
因公司需要，测试了一个小效果，测试完了，公司又说不用了，刚好自己就拿来练手吧
根据需求 显示的效果要求：一行默认显示两个产品，如果只有一个产品默认居中显示，例如：总共10个产品，那么就显示5排，如果总共5个产品，那就是显示3排缺一个，第三排那个也就是5个里面的最后一个默认靠左对齐。
测试了挺久，发现纯css实现不了，还是需要写行js哈。以下是测试的代码，如有问题，请大家指出，好相互学习哈
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style type="text/css">
.wrap {width:auto;}
.wrap .img-contanier {width: 1200px;height: auto;text-align: center;margin: auto;position: relative;}
.wrap .img-contanier .img-item {width:auto;height: auto;margin-right: 10px;display: inline-block;}
.wrap .img-contanier .img-item img{width:550px;height: 550px;}
.wrap .img-contanier .img-item:nth-last-child(1){text-align: left;float: left;margin-left: 41px;}
</style>
</head>
<body>
<div class="wrap">
<div class="img-contanier">
<div class="img-item">
<img src="images/3d-printers-350-350.jpg" alt="">
<img src="images/3d-printers-350-350.jpg" alt="">
</div>
<div class="img-item">
<img src="images/3d-printers-350-350.jpg" alt="">
<img src="images/3d-printers-350-350.jpg" alt="">
</div>
<div class="img-item">
<img src="images/3d-printers-350-350.jpg" alt="">
<img src="images/3d-printers-350-350.jpg" alt="">
</div>
<div class="img-item">
<img src="images/3d-printers-350-350.jpg" alt="">
<img src="images/3d-printers-350-350.jpg" alt="">
</div>
<div class="img-item">
<img src="images/3d-printers-350-350.jpg" alt="">
</div>
</div>
</div>
</body>
<script src="jquery-3.2.1.min.js"></script>
<script>
$(function(){
var length = $(".wrap .img-contanier .img-item:nth-child(1) img").length;
if(length < 2){
$(".wrap .img-contanier .img-item:nth-child(1) img").css({"position":"absolute","left":"50%","margin-left":"-270px"});
}
})
</script>
</html>
- 浮动元素自动居中显示
- 浮动元素居中显示
- html css控制浮动元素居中显示
- 居中一个浮动元素
- 浮动元素居中
- 如何居中一个浮动元素
- 如何居中一个浮动元素？
- 浮动元素水平居中方法
- UL里的LI元素左浮动层一行显示时，使其居中
- CSS样式（元素包含规范、规避脱标流、浮动盒子居中显示、图片和文字垂直居中对齐）
- 块状元素居中/浮动元素居中/绝对定位元素居中/内容居中
- HTML CSS 控制浮动元素居中
- 前端开发，浮动元素居中技巧
- CSS 浮动元素的水平居中
- HTML CSS 控制浮动元素居中
- 如何实现浮动元素水平居中
- css如何让浮动元素水平居中
- 如何让浮动的元素垂直居中
- 基于display:table的CSS布局
- gridControl添加行号
- 前端SEO技巧
- 00-Thrift简介(官方文档略读)
- Java UML
- 浮动元素自动居中显示
- ubuntu 配置ckermit nfs tftpd-hpa ssh vim ftp wine virtualbox JDK ctags cscope
- jira 6.3.6 破解
- AsyncTask源码解析
- Linux CentOS 7 下 JDK 安装与配置
- SSM框架——详细整合教程
- Anaconda+tensorflow1.0安装
- 树形动规初步：“选课”讲解
- FAT12文件系统结构探究
