如何实现多个div水平均匀排列且量两端贴壁
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>蚂蚁部落</title>
<style type="text/css">
.parent{
width:480px;
height:100px;
border:1px solid red;
overflow:hidden;
}
.parent div{
width:100px;
height:100px;
background-color:green;
margin-left:20px;
float:left;
}
</style>
</head>
<body>
<div class="parent">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>蚂蚁部落</title>
<style type="text/css">
.parent{
width:460px;
height:100px;
border:1px solid red;
overflow:hidden;
}
.wrap{
width:480px;
height:100px;
overflow:hidden
}
.parent .wrap div{
width:100px;
height:100px;
background-color:green;
margin-right:20px;
float:right;
}
</style>
</head>
<body>
<div class="parent">
<div class="wrap">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</body>
</html>
如何实现多个div水平均匀排列且量两端贴壁的更多相关文章
- 元素均匀排列自动换行&二维数组前端遍历
1.元素均匀排列并自动换行 display:flex; flex-wrap:wrap; 2.getFiled();取一行,取多行的话用getFiled(‘id’,true); 3.二维数组前端遍历: ...
- CSS实现DIV水平自适应居中
DIV水平自适应居中 <!DOCTYPE html> <html lang="cn"> <head> <meta charset=&quo ...
- 让DIV水平和垂直居中的几种方法
我们在设计页面的时候,经常要把DIV居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示.我们传统解决的办法是用纯CSS来让DIV居中.在本文中,我将给大家讲述如何用CSS和jQu ...
- 如何让div水平垂直居中
引子 我们经常遇到需要把div中的内容进行水平和垂直居中.所以,这里介绍一种方法,可以使div水平居中和垂直居中. 代码: <!DOCTYPE html> <html lang=&q ...
- 【转】如何让DIV水平和垂直居中
来源:http://blog.163.com/www.wxs_123/blog/static/82784664201321831746921/ 我们在设计页面的时候,经常要把DIV居中显示,而且是相对 ...
- 文字以及div水平垂直居中
文字以及div水平垂直居中.md <div class=”content”> <div class=”mydiv”> huangyingnin! </div>< ...
- 【笔记】让DIV水平垂直居中的两种方法
今天写的了百度前端学院春季班的任务:定位和居中问题 由于距离上次学习CSS有点久远了,加上以前木有记笔记的习惯,方法忘得只剩下一种,今天通过网上查阅资料总结了以下两种简单的方法让DIV水平垂直居中. ...
- DIV水平和垂直居中的实现
在div的宽度和高度固定的情况下,实现div水平和垂直居中普遍采用如下的方式: <!DOCTYPE html> <html> <head> <style ty ...
- CSS：使用CSS3将一个div水平和垂直居中显示
使用css3将一个div水平和垂直居中显示 方案一: div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 代码两个关键点:1.上下左右均0位置定位: 2.margin: au ...
随机推荐
- radhat 6.4/centos 6.4 下编译安装 最新ruby 2.1.5
#安装编译环境 yum groupinstall "Development tools" 或者 yum install gcc gcc-c++ gcc-g77 flex bison ...
- 有关<table>的几个问题
1)实现任意一行下边框的颜色设置: 单元格边距(表格填充)(cellpadding) -- 代表单元格外面的一个距离,用于隔开单元格与单元格空间 单元格间距(表格间距)(cellspacing) -- ...
- C#基础：Lambda表达式
从委托的角度来看,Lambda表达式与匿名方法没有区别.在[C#基础:匿名方法]一文中,我使用了匿名方法来调用List<T>的FindAll方法.从C# 3.0开始,在使用匿名方法的地方, ...
- OCR文字设别软件没有权限管理服务器上的许可证怎么办
在使用ABBYY产品,无论是ABBYY FineReader 12,还是ABBYY PDF Transformer+的时候,当你启动许可管理器时,可能会出现"您没有权限管理许可服务器(服务器 ...
- asp.net web api [FromBody]参数
Using jQuery to POST [FromBody] parameters to Web API 时间2013-04-04 00:28:17 Encosia原文 http://encosia ...
- wikioi 1430 素数判定
/*====================================================================== 题目描述 Description 质数又称素数.指在一 ...
- OpenJudge计算概论-求出e的值
/*======================================================================== 求出e的值 总时间限制: 1000ms 内存限制: ...
- 九度OJ题目1387斐波那契数列
/*斐波那契数列,又称黄金分割数列,指的是这样一个数列: 0.1.1.2.3.5.8.13.21.…… 在数学上,斐波纳契数列被定义如下: F0=0,F1=1, Fn=F(n-1)+F(n-2)(n& ...
- OpenJudge计算概论-扩号匹配问题【这个用到了栈的思想】
/*====================================================================== 扩号匹配问题 总时间限制: 1000ms 内存限制: ...
- HTML5鼠标hover的时候图片放大的效果展示
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...