如何让一个 div 左右各空一定距离然后 div 占满剩下的宽度？

最开始想到的方法就是 div 宽度取 n%, style 设置 margin:auto。

但是这样有一个问题，一定距离是根据 n 的取值而来。

今天无意中发现一个方法就是 div 外层套一个 div 设置 style margin-left margin-right 指定的距离，不指定宽度，

里面的div 设置 width 100% 。

1      <div style="margin:0px 10px 10px 10px;border:1px solid red;">

2         <div style="width:100%; border:1px solid blue;">123</div>

3     </div>

如何让一个 div 左右各空一定距离然后 div 占满剩下的宽度？的更多相关文章

  1. css实现左边div固定宽度，右边div自适应撑满剩下的宽度

    (1)使用float <div class="use-float"> <div></div> <div></div> & ...

  2. 左边div固定宽度，右边div自适应撑满剩下的宽度--实现方法汇总

    神奇的事 其实有的方法(float.position.margin.flex)是有border像素的差 代码如下: <!DOCTYPE html><html><head ...

  3. 实现左边div固定宽度，右边div自适应撑满剩下的宽度的布局方式：

    html: <div class="container"> <div class="left"> left固定宽度200px </ ...

  4. 控制DIV占满屏幕

    网上找了很多帖子,希望是CSS控制的,但是在bootstrap环境下, 控制方式上有点问题.达不到想要的效果. 项目中需要实现的效果: DIV区域占满当前窗口的高度.且在ctrl+鼠标滚轮调整窗口大小 ...

  5. div里面的元素垂直均匀分布 按钮引发地址栏出现问号 判断一个数组是否为空 div底部居中 路由传参接受参数

    一个固定高度的div的子元素 在垂直 方向上平均分布 .important-dec{ height: 121px; flex-direction: column; display: flex; jus ...

  6. 一个div，包含三个小的div,平均分布的样式

    从11月份开始,自学前端开发,写静态页面中,经常用到一个大的div下包含三个小的div,平均分布div大小样式,写过多次,也多次忘记,每次都要现找资料,不想之后,在这么麻烦,索性今天自己记录一下,方便 ...

  7. shell判断一个变量是否为空

    判断一个变量是否为空 . 1. 变量通过" "引号引起来 如下所示:,可以得到结果为 IS NULL. #!/bin/sh para1= if [ ! -n "$para ...

  8. 一个标准的，兼容性很好的div仿框架的基础模型！

    <!DOCTYPE html> <html > <head> <meta http-equiv="Content-Type" conten ...

  9. empty是判断一个变量是否为“空”，而isset 则是判断一个变量是否已经设置

    1.echo和print的区别php中echo和print的功能基本相同(输出),但是两者之间还是有细微差别的.echo输出后没有返回值,但print有返回值,当其执行失败时返回flase.因此可以作 ...

  10. shell脚本中判断一个字符串是否是空字符串

    需求说明: 在写脚本的时候,有的时候,需要判断一个字符串是否为空,因此,在此写出如何判断一个字符串为空的方法. 简单来说,就是字符串的比较. 测试脚本: 以下的脚本用于测试str_1和str_2是否是 ...

随机推荐

  1. 测开-面试题-MySQL

    1 增删改查的关键字分别是什么? 答: insert into \ replace into.delete.update.select 2 内连接和外连接的区别? 答: (1)内连接,只会展示与两表关 ...

  2. Windows.h 文件学习

    SDk :软件开发工具包 Api  :Windows操作系统提供给应用程序编程的接口,windows.h 窗口:窗口是屏幕上的一块矩形区域,是Windows应用程序与用户进行交互的接口,分为客户区与非 ...

  3. Java面向对像之方法重写

    方法重写Override 重写:需要有继承关系,子类重写父类的方法! 特点: 1.方法名必须相同 2.参数列表必须相同 3.修饰符:范围可以扩大:public > Protected > ...

  4. 使用python往已有内容的PDF文件写入数据

    只使用reportlab库好像没法在已经有内容的PDF页面中写入数据,只能生成一个空的PDF文件再写入.所以这里我是配合pdfrw库来实现的.具体见示例 from reportlab.pdfgen.c ...

  5. 配置hive

  6. excel添加下拉列表

    2016年数据验证,2010是数据校验

  7. 一次eureka的事故

    本地起了一个微服务(不知道怎么起的),导致注册到微服务上了,不知所措.. 想了下,杀死对应微服务的进程id就可以了(记不住啊!!)

  8. Jmeter使用文档（循环怎么用）

    Jmeter使用文档(循环怎么用) 基础用法 修改语言 Jmeter之界面语言设置 下面使用简体中文的命名进行说明 打开日志 启动后,右上角有个黄色的感叹号图标,点击即可打开即时日志 如果没有看到重启 ...

  9. redis底层数据结构之整数集合(intset)

    整数集合(intset) 当一个集合只包含整数值元素,并且这个集合的元素数量不多时,redis会使用整数集合(intset)作为集合键的底层实现 整数集合用于保存整数值的集合抽象数据类型,它可以保存类 ...

  10. 高校github课程资源汇总

    序号 学校名称 学校类型 课程资源链接 1 清华大学 Top 计算机系课程攻略 https://github.com/Salensoft/thu-cst-cracker https://github. ...