H5 边框:带border的百分比布局
响应式Web设计经常需要我们通过百分比设置组件宽度。如果我们不考虑边框,那么很容易就可以实现,但如果你给每一列以及总宽度都采用百分比设置,那这个时候固定的边框大小就会出来捣乱。下面我们将看到一组方法去解决这个问题,你会学到如何创建一个流式布局,而不用担心额外的边框以及内边距。
当我们给每一列添加一个2px的边框时,问题出现了,如下图,最后一列被挤到下面去了。
解决方案当然应该是:在之前的计算中我们应该考虑到边框(border),但是我们怎么去做呢?结论是,我们不能用百分比去设置border边框的大小,只能用一个固定的值。因为如果所有的都使用百分比设置,那么我们留给border的空间也会是一个变化的值,也就是说当页面宽度变化时,border的值也会跟着变化,这样是有问题的。这使得我们没有办法去决定我们边框的宽度!
即使我们加上padding,也同样可以正常显示:
H5 边框:带border的百分比布局的更多相关文章
- 前端笔记之移动端&响应式(中)视口&百分比布局&弹性盒模型&rem&fillpage
一.viewport视口 1.1什么是屏幕尺寸.屏幕分辨率.屏幕像素密度? 屏幕尺寸:指屏幕的对角线的长度,单位是英寸,常见的屏幕尺寸有3.5.3.7.4.2.4.7.5.0.5.5.6.0等. 屏幕 ...
- H5自带进度条&滑块
一.H5自带进度条 <div id="d1"> <p id="pgv">进度:0%</p> <progress id= ...
- 用H5自带拖拽做出购物车效果的作业题
效果描述: 图片代表物品,图片在有宽高的div上方显示,把图片拖放到设置好的div里面,并且在div里面显示图片的信息:价格,物品名,数量.如果拖放有重复,只是在div里面让物品的数量加1,最后计算出 ...
- 百分比布局实现响应式布局在 IE6 中填坑思路
最近接了个政府项目,政府项目要求响应式,并且兼容IE6,不想用媒体监测的方法,于是用了百分比布局的方法,但是IE6真是名不虚传,做第一个界面就遇到了个bug ①两张宽度各占50%的图片无法在同一横排, ...
- CSS——小三角带边框带阴影
乍一看,很简单,做小三角,首先想到的是利用border的transparent特性,可以制作出小三角的效果.但是注意,这个小三角本身就是边框制作出来的.怎么能在小三角的外边再加一层小边框呢.那就必须再 ...
- rem字体+百分比布局表格
效果图: 上源码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- Android百分比布局支持库介绍——com.android.support:percent(转)
转载自http://www.apkbus.com/forum.php?mod=viewthread&tid=244752&extra=&_dsign=0b699c42 在此之前 ...
- Android 屏幕适配(二)增强版百分比布局库(percent-support-lib)
转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/46767825: 本文出自:[张鸿洋的博客] 一 概述 上周一我们发布了Andr ...
- HTML-移动端如何使用css让百分比布局的弹窗水平和垂直方向上居中
pc端让一个弹窗水平和垂直方向居中,在知道弹窗宽高的情况下很好计算,只需要用如下css即可: #date{ width: 300px; height: 300px; position: absolut ...
随机推荐
- python学习笔记_week21
note 上节内容回顾: 1.请求周期 url> 路由 > 函数或类 > 返回字符串或者模板语言? Form表单提交: 提交 -> url > 函数或类中的方法 - .. ...
- c# 和 java <转载>http://www.cnblogs.com/zhucai/archive/2011/02/16/csharp-compare-java.html
从语法层面来讲,c# 和 java 是非常相似的. <转载> 这篇文章对C#与Java做一个语言级的对比,方便C#转Java或Java转C#的人有个大致了解.这里大致用C#3.0与Java ...
- Android Netty Server
项目源码在github上,请看这里-->Android Netty Server Android netty server Start a netty server on android Dow ...
- twisted的installReactor()函数
#twisted的安装反应堆函数def installReactor(reactor): """ Install reactor C{reactor}. @param r ...
- springboot 前后端分离项目跨域配置
@Configuration @EnableWebMvc public class CorsConfig implements WebMvcConfigurer { @Override public ...
- Linux 远程登录配置
如果使用FlashFxp的sftp无法登陆,提示SSH 错误: 协商认证模式失败,也同样这样操作 修改你的ssh配置文件 配置文件路径如:/etc/ssh/sshd_config PasswordAu ...
- WPF按钮响应函数中执行操作耗时较长时,UI 界面不能实时更新——问题原因与解决方案
原因: 一般来说,一个WPF窗口程序,只有一个UI线程, 如果这个线程停在某个函数,UI将会被阻塞,所有其他的界面操作都不能即时响应. 解决方案: 新开一个线程来执行耗时较长的操作,以不阻塞UI.
- JSP页面java代码报错:Purgoods cannot be resolved to a type
错误提示 : Purgoods cannot be resolved to a type Purgoods不能解析为一个类型 原因 : 缺少引入Purgoods类 页面中引入java类,执行java代 ...
- 修改页面中显示出需要修改的数据(包括select选择框复显示)
页面中需要用到某个对象时,在底层代码中赋值,然后页面用java代码进行获取调用 如下截图: select复显示:根据后台方法赋值选择框 ,并设置初始值 按钮及选择框的禁用(五种方法): 方法一: $( ...
- delphi dxBarManager 的dxBarEdit 输入问题
Developer Express 6 想做像office2007那样界面. 问题:dxBarManager1 里面添加了cxBarEditItem1 这是个文本框,运行可以输入内容,但是当焦点失去时 ...