如何让一个 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. 流（stream）如何理解？

    前言 如果你搜索输入输出函数,那么你会看到各种各样的流.那么这个流到底是什么东西呢,本文将形象地类比介绍通用的流. 怎样理解通用的流 流,顾名思义就是像水流一样可以流动的事物,可以在不同的领域来去自如 ...

  2. VUE学习-:class & :style

    :class & :style :class 键值对 <div id="app" v-bind:class="{ 'active': isActive }& ...

  3. iOS 常用第三方库及原理

    AFNetWorking SDWebImage MJRefresh Masonry YYModel IQKeyboardManger

  4. LinuxK8S集群搭建一（Master节点部署）

    系统环境: CentOS 7 64位 准备工作: 通过虚拟机创建三台CentOS服务器,可参照之前的文章:Windows10使用VMware安装centos192.168.28.128 --maste ...

  5. [PHP]流程控制的替代语法:endif/endwhile/endfor使用介绍

    我们经常在wordpress一类博客程序的模板里面看到很多奇怪的PHP语法,比如: 代码如下: <?php if(empty($GET_['a'])): ?> <font color ...

  6. windows下gitlab-ci.yml配置进入某一目录找不到，无权限

    打开任务管理器查看gitlab-runner所使用的的用户 更改gitlab-runner服务权限, 找到gitlab-runner服务,右键-属性-登陆,选择[此账户]点击[浏览] 选择具有权限的账 ...

  7. liunx常用命令必备，持续更新

    inux中的命令的确是非常多,但是只需要掌握我们最常用的命令足够完成我们的工作了. 1.切换超级用户与普通用户 默认登录的是普通用户权限显示$符从普通用户切换超级用户权限:sudo su输入密码 从超 ...

  8. HIVE- 各年逐月累加函数

    select year_flag,month_flag,field,SUM(field) OVER (PARTITION BY year_flag ORDER BY month_flag)from t ...

  9. starlette.routing.NoMatchFound

    目前正在学习FastAPI, 目前是学习到了引入静态文件.这是我引入的本地文件的方式 url_for('/static', path='/imgs/favicon.ico') 只要启动服务,就会报错5 ...

  10. (原创)odoo14下qweb模板的前端与后端语法区别

    1.后端(qweb打包) 后端使用t-inherit 指定继承的模板,使用t-inherit-mode 指定继承的模式,使用xpath定位标记,使用position指定扩展位置. 2.前端 前端仍旧使 ...