如何让一个 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. MSB/LSB的意思

    MSB一般指最高有效位. 最高有效位( most significant bit,MSB)指的是一个n位二进制数字中的n-1位,具有最高的权值2^(n-1).最低有效位和最高有效位是相对应的概念. L ...

  2. Prometheus学习笔记之设置存储时间为30天不生效

    0x00 概述 Prometheus升级到2.23进行测试发现,设置存储时间为30天未生效,根据官方说明手册,实际运行后发现数据只能存储几个小时.... --storage.tsdb.retentio ...

  3. Pytorch和torchvision版本号对应表

    torch与torchvision版本对应表 torch及torchvision版本号查询 import torch print(torch.__version__) import torchvisi ...

  4. wget 和 curl的区别

    原文 https://www.codenong.com/s1190000022301195/ https://geek-docs.com/linux/linux-ask-answer/differen ...

  5. js实现禁止浏览器后退

    试了网上不少的js禁止浏览器后退的代码,发现只有下面的一种效果还是可以的. <script language="javascript"> history.pushSta ...

  6. 图片上传 加水印 以及GDI基本画图

      上传图片并给所上传的图片添加水印 1 HttpPostedFile file = Context.Request.Files[0]; //有这个0说明一次只能上传一张 2 if (file.Con ...

  7. 067_VFPage中Js与controller交互方式（二） RemoteAction

    上篇文章介绍了Toolkit API,是一种js的前台写法 同步调用格式:sforce.connection.method("argument1","argument2& ...

  8. 靶机练习6: BSS(Cute 1.0.2)

    靶机地址 https://www.vulnhub.com/entry/bbs-cute-102,567/ 信息收集 进行全端口扫描,确认目标开放端口和服务 nmap -n -v -sS --max-r ...

  9. ENGG1310 Electricity and electronics P1.1 microelectronics & optoelectronics

    课程内容笔记,自用,不涉及任何 assignment,exam 答案 Notes for self use, not included any assignments or exams 听说这节课内容 ...

  10. 下载成功安装maven，卸载替换eclipse自带的报错的maven

    博主呢用eclipse自带的maven新建了一格maven项目,结果报了下面的错误:Could not resolve archetype org.apache.maven.archetypes:ma ...