如何让一个 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. netstate查找端口占用

    netstat -nao 列出本机端口占用信息加上|findstr 筛选 各个字段的意思: 协议  本地地址:端口          外部地址:端口        状态           PID 这 ...

  2. transformers 之Trainer对应的数据加载

    基础信息说明 本文以Seq2SeqTrainer作为实例,来讨论其模型训练时的数据加载方式 预训练模型:opus-mt-en-zh 数据集:本地数据集 任务:en-zh 机器翻译 数据加载 Train ...

  3. 你到底懂不懂JavaScript？来做做这12道面试题试试！

    携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第 21 天,点击查看活动详情 JavaScript 是每一个前端开发者都应该掌握的基础技术,但是很多时候,你可能并不完全懂 Jav ...

  4. 同一个tomcat的项目跳转

  5. linux下yum安装时出现Loaded plugins: fastestmirror

    linux使用yum安装软件时出现报错Loaded plugins:fastestmirror,是提示这个插件不能使用了,fastestmirror是yum的一个加速插件, 解决的办法是:将这个插件禁 ...

  6. iPhone添加节假日日历地址

    添加苹果节假日日历地址 手动订阅节假日: 打开"设置">"日历">"帐户">"添加帐户">&qu ...

  7. docker创建etcd

    创建docker-compose.yml version: "3.5" services: etcd: hostname: etcd image: bitnami/etcd:3 d ...

  8. 合格できる日本語能力試験, N1.PDF

    书本详情 合格できる日本語能力試験, N1种类:Languages - Japanese Language Reference年:2010出版:Shohan.出版社:Aruku语言:japanese页 ...

  9. Windows 批量测试 ip:port 是否通畅

    使用 telnet + cmd 脚本处理: @echo off start cmd /k "telnet 10.2.3.29 3000" start cmd /k "te ...

  10. C语言源文件如何编译为exe

    先观看https://blog.csdn.net/u014772182/article/details/43348465来配置gcc环境随后在cmd中cd到目标文件夹gcc main.c -o ste ...