如何让一个 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. C# DevExpress中GridControl控件的基本属性设置和使用方法

    1.GridControl隐藏GroupPanel(主面板) 隐藏:鼠标单击Run Designer-OptionsView-ShowGroupPanel=False; 修改:鼠标单击Run Desi ...

  2. js正则匹配多行文本

    原文:https://lwebapp.com/zh/post/regular-expression-to-match-multiple-lines-of-text 需求 最近有小伙伴提了个需求,想用正 ...

  3. replace 常用积累

    1.替换有,或者.为: obj.keyword.replace(/,|./g,';') 2.替换元素标签类似于<em>文字</em>这种 let name=item.name. ...

  4. 一次eureka的事故

    本地起了一个微服务(不知道怎么起的),导致注册到微服务上了,不知所措.. 想了下,杀死对应微服务的进程id就可以了(记不住啊!!)

  5. airtest IDE初级教程

    一.简介 AirtestIDE 是一款跨平台的 UI自动化测试编辑器 ,内置了Airtest和Poco的相关插件功能,能够使用它快速简单地编写 Airtest 和 Poco 代码. 1. Airtes ...

  6. ubantu下的java的发布

    1.先检查是否安装过 java version 2.卸载的命令 sudo apt-get remove openjdk* 3.创建存放jdk的目录 sudo mkdir /usr/lib/jvm 4. ...

  7. SpringBoot-集成PageHelper及使用

    1.添加依赖 1 <dependency> 2 <groupId>com.github.pagehelper</groupId> 3 <artifactId& ...

  8. Mysql之迂回连接术

    转载请注明来源:https://www.cnblogs.com/Sherlock-L/p/14932870.html 关键词:OmniDB.Mysql Router 背景:项目的测试数据库放在了生产机 ...

  9. css animation 复刻

    今天做了一个七巧板的小页面,发现对于css动画一些内容又有了新的认识,所以以下准备复习一遍 首先一共有以下属性 @keyframes 如果您在 @keyframes 规则中指定了 CSS 样式,动画将 ...

  10. Pytorch实战学习（一）：用Pytorch实现线性回归

    <PyTorch深度学习实践>完结合集_哔哩哔哩_bilibili P5--用Pytorch实现线性回归 建立模型四大步骤 一.Prepare dataset mini-batch:x.y ...