如何让一个 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. FPGA MIG调试bug（一）

    目标器件:复旦微FPGA:JFM7K325T8FCBGA676(对标Xilinx Kintex-7系的XC7K325T) 工程背景:板载4片DDR(AllianceMemory_DDR3L_8G_AS ...

  2. 记录C#学习过中看到的文章

    1.DataRow 转实体类 https://www.cnblogs.com/macT/p/10878863.html https://www.cnblogs.com/yangboyu/archive ...

  3. Django基础（1）

    一.开发模式 MVC模式: model:数据库 view:前端展示 controller:逻辑控制 MTV模式(Django): model:数据库 view:逻辑控制 template:前端展示(模 ...

  4. 新的学习历程-python4 input

    1 num = input("请输入数字:") # input用于录入键盘输入 2 print(num) 3 print(type(num)) #input获取到数据类型是字符类型 ...

  5. CSS3图片自适应各种尺寸的屏幕

    img {    max-width: 100%;    height: auto;} 设置最大宽度,高度自适应.

  6. vue2/vue3+eslint文件格式化

    vue+javascript 1.设置vscode保存时格式化文件 2.打开settings.json 3.设置settings.json文件 { "editor.codeActionsOn ...

  7. 071_salesforce 页面自动检索匹配显示设置

    通常我们会有需求:在搜索框中输入关键词,点击后面搜索,相关数据会显示在输入框的下面供选择,如下图 First I am assuming that you already have Static Re ...

  8. MYSQL启动：'服务没有相应控制功能'问题解决

    启动 MySQL 服务,此处若是显示错误'服务没有相应控制功能' 尝试解决方法:访问如下网站: https://cn.dll-files.com/vcruntime140_1.dll.html  下载 ...

  9. [2015年NOIP提高组] 跳石头

    一年一度的"跳石头"比赛又要开始了! 这项比赛将在一条笔直的河道中进行,河道中分布着一些巨大岩石.组委会已经选择好了两块岩石作为比赛起点和终点.在起点和终点之间,有 <spa ...

  10. Python的入门学习Day 16~18——form”夜曲编程“

    Day 16 Day 17 time:2021.8.14. ​ 今天七夕.激动,喜悦.平静呼吸,嘻嘻~ 也许我也是天空.去看课程了,嗯.今天重点学习了循环的对立面--"跳出循环"的 ...