splitpane如何设置竖条的宽度_页面中有间隔的方格布局如何完美实现?
典型的布局示例:
如上图所示的布局,方格中间有一定的间隙,间隙是固定的。应该如何布局会更加完美呢,比如要保证在布局完成的情况下,可以快速的添加一个元素依然保持这样的布局。以及当出现第二行的时候,这样的布局依然能够不受影响。又不用修改太多的内容。
设置宽为100%和块元素的默认宽度
现在在这里说一个问题,就是块元素的宽度默认是占满一行,我们很容易和给元素设置100%混淆。其实呢,这两个虽然表现上很容易让我们以为他们展现的效果是一样的,因为这两种方式都是占满了父元素。但是他们之间还是有很大的区别的。他们的区别主要在于元素的宽度是随着什么而变化的,如果设置100%的话,那么该元素的width始终是和父元素保持一致的,给该元素设置的margin是不会影响该元素width变化的。当然仅有父元素的宽度会影响该元素的width变化。如果不设置宽的话,块元素是独占一行的,那么该元素的width,不仅受父元素的影响,也受该元素的margin的影响。
独占一行的块元素的宽设置margin的影响
记住以下两条规律
当给一个未设置宽的块级元素,设置了margin(水平方向)的话,那么margin值(正值)加上改元素的width的和等于父元素的宽度
当给一个未设置宽的块级元素,设置了margin(水平方向)的话,那么margin值(负值)刚好是该元素的宽度超出父元素的距离
如下图所示:规律1示例:规律2示例:
解决方案
划分平均区域
首先在一个横向区域,平分了5份,且横向排列,那么我们采用浮动的横向排列,且平均把每个元素设置成20%。
<ul class="list">
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
ul>
.list{
overflow: hidden;
}
.list li{
width: 20%;
height: 100px;
float: left;
}
在每个区域中放置内容,通过margin-right隔出间隔
<ul class="list">
<li>
<div class="content">div>
li>
<li>
<div class="content">div>
li>
<li>
<div class="content">div>
li>
<li>
<div class="content">div>
li>
<li>
<div class="content">div>
li>
ul>
.list{
overflow: hidden;
}
.list li{
width: 20%;
height: 100px;
float: left;
}
.content{
margin-right: 10px;
}
此时我们可以想象到,最后一个元素还多了一个10px的间距,那么最后一步就是如何解决这个间距的问题。
拉伸父元素,隐藏尾部的间隙
我们给list再套一个元素,让list在其父元素下拉伸,刚好隐藏掉多余的部分。
class="wrapper">
<ul class="list">
<li>
<div class="content">div>
li>
<li>
<div class="content">div>
li>
<li>
<div class="content">div>
li>
<li>
<div class="content">div>
li>
<li>
<div class="content">div>
li>
ul>
</div>
.wrapper{
width: 800px;
overflow: hidden;
}
.list{
overflow: hidden;
margin-right: -10px;
}
.list li{
width: 20%;
height: 100px;
float: left;
}
.content{
margin-right: 10px;
}
可以查看实际效果,最终能实现我们开头所展示的效果!且这种布局方式有很多的扩展性,如果一行是4个,那么只需要把每个元素的宽设置为 25%,且在元素的个数中减去一个就行。本文完~
splitpane如何设置竖条的宽度_页面中有间隔的方格布局如何完美实现?相关推荐
- splitpane如何设置竖条的宽度_如何用 CSS 画三角形和箭头
三角形和箭头这两个图标在网页中经常会用到,例如:下拉选择框.排序.返回到上一页.导航条,分页都会用到三角形或者箭头,当然是用图片的方式的确可以实现这一样式,但是是用图片如果调整颜色那就比较困难了,除非 ...
- python设置坐标轴刻度宽度_使用轴网格matplotlib时设置刻度宽度
我正在尝试制作一个共享的y轴绘图(连续3个绘图). 当我尝试为所有三个子批次设置刻度宽度时,以下方法不起作用.在 首先,我试图通过rc params设置tick宽度.这适用于记号长度,但不适用于宽度. ...
- jquery设置video的宽度_使用jQuery和CSS自定义HTML5 Video 控件 简单适用
Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本的浏览器支持.包括IE9,也是如此.不同的浏览器提供了不同的原生态浏览器视频空间.我们制作自定义视频控件为了在所有的浏览器中 ...
- word如何设置长宽高_word页面高度和宽度怎么设置
大家好,我是时间财富网智能客服时间君,上述问题将由我为大家进行解答. word设置宽度高度的方法: 1.首先打开一篇文档,在功能区选择"页面布局". 2.在页面布局的页面设置功能区 ...
- word怎么设置页面宽度和页面高度
问题:有时候复制操作,会出现两页的宽度不一致. 首先打开一篇文档,在功能区选择"布局". 在布局的页面设置功能区,点击页面设置右下角的小按钮打开详细设置.页面设置里面有设置纸张大小 ...
- c++可视化开发_页面可视化配置搭建工具技术要点
点击上方"IT平头哥联盟",选择"置顶或者星标" 与你一起成长- 前言 最近公司也在计划做可视化配置平台,从本文原作者(腾讯AlloyTeam@陈韩杰)的分析中 ...
- kindle如何设置不闪屏_疑问解答 | Kindle翻页为什么闪屏?
经常有一些新入手Kindle的小伙伴,跟静读君反应:用Kindle看书每次翻页屏幕都会闪一下:这是怎么回事?是不是我买的Kindle有问题啊? 都不是,用久了Kindle的朋友应该都知道,闪屏--其实 ...
- h5 android 字体设置,解决因为手机设置字体大小导致h5页面在webview中变形的BUG
解决因为手机设置字体大小导致h5页面在webview中变形的BUG 首先,我们做了一个H5页面,在各种手机浏览器中打开都没问题.我们采用了rem单位进行布局,通过JS来动态计算网页的视窗宽度,动态设置 ...
- 计算机格式设置实验,Word实验3 页面格式设置
word练习,计算机基础练习,计算机考试,办公软件技巧,计算机技巧 Word实验3 页面格式设置 操作要求: 打开文档"Wordtext3.doc",并对其作如下的操作: 1. 设 ...
最新文章
- ATS插件channel_stats源码分析解读
- Python字典部分源码分析,字典是无序的
- Java编程思想笔记(持有对象)
- 信息安全系统设计基础第九周学习总结
- 【HDU - 1247】Hat’s Words(字典树,预处理,tricks)
- 在游戏设备上砸钱 其实小姐姐们更疯狂!
- jQuery如何退出each循环的?
- 如何使用计算机管理来为硬盘分区,电脑如何硬盘分区合理_电脑硬盘分区的基本步骤-win7之家...
- Linux搭建流服务器笔记
- Revit二次开发——链接模型坐标系与模型坐标系转换
- mac-数据库建模工具Workbench、PDMan
- 杭电 2037 经典贪心
- Ameya:蔡司激光共聚焦显微镜的优势特点及应用领域
- win10运行程序提示“为了对电脑进行保护,已经阻止此应用” 解决方法
- Python京东抢购
- 奇妙的数学:蓝眼睛岛和强弱共识
- 2021年三亚旅游行业发展现状分析:旅游总收入达747.03亿元,占GDP的89.43%[图]
- 通过前端form表单将信息提交至数据库
- 数字油田AI平台建设之视野、策略及切入点(深度好文)
- android studio最新版下载,Android Studio mac版-Android Studio for mac下载 V4.2.1-PC6苹果网
热门文章
- SAP Marketing Cloud功能简述(四) : 线索和客户管理
- 在C4C UI里嵌入CRM WebClient UI
- 使用Java代码连接SAP ABAP Netweaver服务器
- ABAP Text表的实现原理
- Cannot maintain customer-spec. event handler registration in SAP system
- My Appointment - Belonging to me, Search by team, Search by group
- SAP CRM Pricing Procedure中的Doc和Customer Procedure在哪里维护
- SAP HANA里执行SQL语句的两种方式
- 如何使用SAP CRM增强工具AET创建Table表格类型的增强
- OpenFOAM流固耦合问题-FsiFoam(foam-extend-4.0)运行tutorials的bug修复