如何让一个 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. k8s之service服务

    service服务介绍 在k8s中,pod是应用程序的载体,我们可以通过pod的ip来访问应用程序,但是pod的ip地址不是固定的,这也就意味着不方便直接采用pod的ip对服务进行访问 为了解决这个问 ...

  2. 2021年全国II巻高考作文刚刚认真看了一下发现很经典，用漫画书法的形式告诉做人的道理！！！说说自己的想法

    我觉得做人就应该做到这三句话: 1.逆风起笔 藏而不露    ---- 懂得在逆境中潜行 2.中锋用笔 不偏不倚   ---- 做人要正直  不要走歪路 3.停滞迂回  缓缓出头 --   借喻青年人 ...

  3. 使用svg让页面自适应浏览器大小，整体等比缩放

    网页代码: <!DOCTYPE html> <html> <head> <style> body { margin:0; padding:0; widt ...

  4. Jsonhelper类

    public static class JsonHelper { #region json转对象 /// <summary> /// json转对象 /// </summary> ...

  5. pytorch学习笔记（9）--神经网络模型的保存与读取

    一.网络模型的保存和加载 1.网络模型保存方法1 import torch import torchvision vgg16 = torchvision.models.vgg16(weights=Fa ...

  6. Angular响应式表单验证输入(跨字段验证、异步API验证)

    一.跨字段验证 1.新增验证器 import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms'; exp ...

  7. linux下生成证书

    1.生成私有证书 # 生成需要密码的密钥文件server.key openssl genrsa -des3 -out server.key 2048 # 转成不用密码的rsa密钥文件 openssl ...

  8. 在 Windows 上使用VirtualBox 安装 Ubuntu

    一.VirtualBox虚拟机软件 之前使用过VMWare,这是第一次尝试使用VirtualBox,记录一下~ 我们可以从官网下载VirtualBox,地址:https://www.virtualbo ...

  9. global 函数

    x = 15 # 全局变量Gdef func_a(): print(x)def func_b(): print(x)def func_c(): global x # 在定义函数内声明x为全局变量后,才 ...

  10. i春秋云镜 CVE-2022-32991

    第一种方法 第二种延时注入