如何让一个 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. git 的基础使用

    配置: 首次安装完git后,需要配置信息 检查配置: git修改:  git config --global user.name "Your_username"    重新设置gi ...

  2. CF207C

    前言 学习 zzd 博客( 这题超级没有素质. 连个题解都搜不到. 好不容易搜到一个. 看了一下是 pascal. 不过还好我有办法. 树剖做 \(k\) 级祖先. 十万的俩老哥飘过. 三百毫秒优异成 ...

  3. CF1098D 题解

    题意 传送门 对于一个元素个数大于 \(1\) 的可重集,每次取出两个数 \(x,y\) 合并.若 \(x\le y\le 2x\),则称其为危险合并.重复上述操作至无法合并. 给你一个初始为空的可重 ...

  4. es 6中for in与for of适用对象

    在 ES6 中提供了 for-of,可以很方便的遍历数组和类数组,但是却不能遍历对象,这是为什么,与 for-in 仅仅相差一个单词,用途也是遍历,为什么却不能使用在对象上? 查资料后得知,原来 ES ...

  5. NFS服务器搭建与autofs自动挂载

    一．NFS文件详解 1. /data/            表示需要共享的目录. 2. IP                表示允许哪个客户端访问. 3. IP                后括号 ...

  6. 迁移virtualenv虚拟环境，复制，免安装

    前提:在原来的服务器中使用相同的python版本,并使用virtualenv创建了自己的虚拟环境. 1.首先在新的机器上安装virtualenv(要有和原机器相同版本的python解释器,第5步也很相 ...

  7. node 内存全局配置（--max-old-space-size）

    安装完了node和angular之后,使用powershell 窗口进行 ng build --prod打包,会提示内存溢出:JavaScript heap out of memory. 项目内打包解 ...

  8. Ubuntu14.04下Git安装与使用

    Workspace    : 工作区,就是你平时存放项目代码的地方 Index / Stage : 暂存区,用于临时存放你的改动,事实上它只是一个文件,保存即将提交到文件列表信息 Repository ...

  9. Hadoop环境的搭建

    Hadoop HDFS.Yarn.MapReduce Hadoop集群环境搭建 完全分布式环境,伪分布式将其中的多台服务器改为一台,并将配置文件中的相关内容更改即可 1.安装Linux系统模型机 关闭 ...

  10. Python学习笔记（四）算术运算符

    一.算术运算符 运算符 说明 实例 结果 + 加 12.45 + 15 27.45 - 减 4.56 - 0.26 4.3 * 乘 5 * 3.6 18.0 / 除法(和数学中的规则一样) 7 / 2 ...