并排 div

2024-04-03

如何并排放置两个 div 并在它们之间使用分离器?

那就是我的意思:

我假设 html 布局看起来像这样:

<div id="container">
    <div id="left"></div>
    <div id="splitter"></div>
    <div id="right"></div>
</div>

or

<div id="container">
    <div id="left">
        <div id="splitter"></div>
    </div>
    <div id="right"></div>
</div>

html:

<div id="container">
    <div id="left"></div>
    <div id="splitter"></div>
    <div id="right"></div>
</div>

css:

#container{
 width:990px; //or 100%
}
#left{
 width:300px; //or 30%
 float:left;
}
#splitter{
 width:90px; //or 5%
 float:left;
}
#right{
 600px; //or 65%
 float:left;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

并排 div 的相关文章

  • 如何实现右边缘倾斜的 div? [复制]

    这个问题在这里已经有答案了 我几天来一直在寻找使 div 的右边缘倾斜 45 度的代码 这是我特别想要得到的图像示例 似乎有很多 倾斜边缘 div 的示例 但我找不到任何具有特定右侧倾斜的示例 我花了很多时间试图改变其他人的代码 但结果却一
  • JavaScript 跨浏览器单击 HTML DOM 元素

    是否有可用的普通 JavaScript 跨浏览器函数能够触发 HTML DOM 元素 包括 div 等非表单元素 上的单击事件 大多数走这条路的人要么最终开发自己的事件管理系统 这并不难 但很烦人 要么在可用的功能范围内工作 如果所有浏览器
  • 使用jquery和css点击按钮后旋转div文本

    我想使用 jquery 和 css 单击按钮后旋转 div 文本 如果用户点击Rotate Left按钮 然后文本在左侧旋转 or用户点击Rotate Right按钮然后文本在右侧旋转 Example div Happy Birthday
  • 响应式 CSS 图像锚点标签 - 图像地图样式

    我一直在开发一个响应式网站 并且在图像映射方面遇到了一些问题 图像映射似乎不适用于基于百分比的坐标 经过一番谷歌搜索后 我发现了一个 JS 解决方法 http mattstow com experiment responsive image
  • 没有嵌套容器的桌面和移动 Flexbox 布局

    我有 3 个 div 它们必须按移动布局的特定顺序排列 但我必须将第 2 个 div 作为桌面布局的侧边栏 所以对于移动设备 分区1 分区2 分区3 对于桌面 分区1 div2 分区3 在桌面布局中 div 2 有阴影背景 因此必须是父级的
  • 是否可以在没有 Javascript(仅 CSS)的情况下执行相同的操作(悬停效果)?

    我正在尝试创建一个带有图标的按钮像这样 http jsfiddle net pRdMc HTML div div class icon div span Send Email span div CSS button width 270px
  • 使用 获取用于 javascript 的 RSA 密钥?

    我的 Web 项目需要一个 RSA 密钥对 虽然有一些库 但我认为依靠浏览器 为了安全性和速度 为我生成密钥是个好主意 是否可以使用注册机或其他浏览器 API 来执行此操作 我不知道如何从注册机获取密钥 它们似乎是在提交时生成的 但我不想将
  • 拖放区缩略图宽度图像大小

    如何更改上传图像的缩略图大小 我在我的javascript中尝试过thumbnailWidth 350 但是这不会增加缩略图大小 而缩略图只是看起来放大了 如何操作图像缩略图大小 HTML section section
  • 在打印 CSS 上在每个页面周围绘制边框?

    打印时我需要在每个页面周围绘制边框 我最初是使用带有分页符的 div 来完成此操作 例如 media print contentContainer position inline height 98 width 100 top 0px le
  • JQuery 可滚动文本

    我正在寻找一个 jquery 插件 它将在可滚动框中绑定文本 大多数滚动插件都会转换浏览器滚动条 但我想保持它的原样和可用 这只是为了在较小的空间内包含大量的文本 就像这样page http www class pm files jquer
  • canvas.getContext('2D') 返回空值

    我创建了一个画布并将其命名为getContext 方法 但它返回null为上下文 这是我使用的代码 我在控制台中得到了这个
  • AngularJS 输入字段未从控制器内的 setTimeout 更新

    我正在使用 AngularJS 支持的页面 并且我需要在只读输入文本字段内显示正在运行的时钟 与data ng model 为了模拟运行的时钟 我使用了 JavaScript 调度程序setTimeout每 1000 毫秒调用一个函数 该函
  • c# 如何生成锦标赛括号 HTML 表

    所以我已经被这个问题困扰了三个星期 但我一生都无法弄清楚 我想做的是使用表格获得这种输出 演示 http www esl world net masters season6 hanover sc2 playoffs rankings htt
  • 如何将当前元素传递给 Knockout.js 绑定中的 Javascript 函数?

    因此 我尝试根据是否选中子复选框 使用 Knockout js 将类添加到元素 为此 我试图通过this作为我的函数的参数 目前 我的精简 DOM 结构如下 tr td td tr
  • 通过 jQuery 从输入类型=“文件”多个中删除文件

    我在使用 PHP 和 jQuery 上传文件时遇到问题 表单可以一次上传多个图像 这些图像可以在滑块中预览 表单还包含两个字段标题和描述 滑块通过 jQuery 工作 当用户通过单击选择文件来选择多个图像时
  • HTML 和 JavaScript - 将滚动操作从一个元素传递到另一个元素

    假设我有两个 div div div div A scrollable list div 我想让它当光标停在里面时 control并且鼠标滚轮滚动 view将会滚动 无论如何要实现这一目标 好的 快速修复对我有用 即使固定 div 不可滚动
  • 如何在 Bootstrap 列中使用文本溢出?

    假设我有一行具有固定高度 并且我在其列中插入了一些文本 如果太长 我希望将其剪掉 并在行尾添加三个点 如下所示 我在用着文本溢出 省略号 我的行中有此属性 但无法使其工作 JsFiddle http jsfiddle net Alexnot
  • 让登录更安全

    我已使用此代码进行管理员登录 仅当用户输入正确的用户名和密码时才应打开loginhome php 但后来我意识到这根本不安全 任何人都可以直接访问 mywebsite loginhome php 而无需登录 注销后 可以使用后退按钮打开 l
  • CSS:缩放字体大小以适应父块元素的高度

    我发现的几乎每个问题和答案都谈到了视口大小 这确实不是我的问题 拿着这支笔 https codepen io njt1982 pen pZjZNM https codepen io njt1982 pen pZjZNM 我有一个非常基本的
  • 使用 JQuery 预填充选择字段的下拉选项验证

    我有这个 JQuery 片段来防止选择已在另一个字段中选择的下拉选项 var coll select name service on change function coll each function var val this value

随机推荐

  • 使用 numpy 拟合数据

    我有以下数据 gt gt gt x array 3 08 3 1 3 12 3 14 3 16 3 18 3 2 3 22 3 24 3 26 3 28 3 3 3 32 3 34 3 36 3 38 3 4 3 42 3 44 3 46
  • 未接听电话的通话计费 - Twilio

    我正在使用此代码进行传出浏览器调用link https www twilio com docs quickstart php client outgoing calls 我使用的代码与链接中所示的代码相同 也使用 twiML 应用程序 我正
  • 使用经典 ASP 发送“application/soap+xml”SOAP 请求

    如有任何帮助 我们将不胜感激 我已经做了几天了 下面是我到目前为止得到的代码 不幸的是 当我运行它时 我收到 HTTP 415 错误 无法处理消息 因为内容类型为 text xml charset UTF 8 不是预期的类型 applica
  • 填充图中水平线上方和下方的区域

    我想填充两条水平线上方和下方的区域 这就是我想出的 par mfrow c 1 2 x lt seq 1 24 1 y lt rnorm 24 10 2 for i in 1 2 plot x y ylim c 4 16 lines x y
  • 如何从数据流中的PCollection读取bigQuery

    我有一个从 pubsub 获得的对象 PCollection 比如说 PCollection
  • 如何根据第 i 个字段的值对 numpy 数组进行切片?

    我有一个 2D numpy 数组 有 4 列和很多行 gt 10000 这个数字不固定 我需要创建n按其中一列的值划分子数组 我发现的最接近的问题是如何按列值对 Numpy 数组进行切片 https stackoverflow com qu
  • 无法根据中心原点旋转齿轮

    我正在尝试制作一个悬停效果 它将三个不同的 cog svg 图标旋转到其受尊重的中心原点 我尝试使用transform origin作为中心但没有运气 任何帮助 将不胜感激 下面是我的代码 cog middle transform rota
  • 如何将 pandas value_counts() 合并到数据帧或使用它来子集数据帧

    我使用 pandas df value counts 来查找特定品牌出现的次数 我想将这些价值计数与初始数据框中的各个品牌合并 df has many columns including one named brands brands df
  • 获取传递给函数的参数的列表/元组/字典?

    给定以下函数 def foo a b c pass 如何获得传入参数的列表 元组 字典 等 无需自己构建结构 具体来说 我正在寻找 JavaScript 的 Python 版本arguments关键字或 PHP 的func get args
  • 不使用 powershell 远程安装 .msi?

    我们有一个多服务器系统我们需要在客户端安装 我想编写一个脚本 可以 关闭远程机器上的服务 卸载多台远程计算机上的软件 在多个远程计算机上安装 msi 文件 我曾挣扎过psexec and wmic做第 2 点和第 3 点 似乎必须有一种更简
  • Python 日志记录重复

    我有四个文件 Main py A py B py 日志系统 我正在使用 main 来使用 A py 和 B py 的函数 所以现在我必须在调用它们时记录所有信息 所以我编写了一个名为 log system 的脚本来为每个脚本文件 例如 A
  • Perl:Javascript::V8 模板 - 来自 Perl

    寻找像 HTML Mason 或 Mason 这样的模板引擎 那么什么将源组件 编译 为 perl 代码 而不是 perl 代码将组件 编译 为 JavaScript 代码 然后使用 Javascript V8 运行 执行它们Perl 模块
  • 可以使用 XSLT 将 XML 拆分为多个页面吗?

    我有一个带有分页指示的 XML 文档 我想将这个单个文件转换为多个输出文件 也就是说 我想转换以下内容
  • 针对 Azure AD 的 WebForms 身份验证

    我有一个 WebForms 站点 它在内部服务器上运行 并根据我们的内部 Active Directory 对用户进行身份验证 由于我们正在实施一些新功能 该网站需要移动到外部服务器 然后更改身份验证 以便根据我们的 Office 365
  • 覆盖 Altair 折线图的默认分组?

    我想制作一张图表 其中一条线在沿线的不同位置具有不同的颜色 这不起作用 import altair as alt import numpy as np import pandas as pd x np linspace 0 1 y x 2
  • 禁用/隐藏辅助功能元素

    我试图从 VoiceOver 中隐藏应用程序中的多个元素 以便屏幕阅读器不会大声朗读它们 在 iOS 上 我设置isAccessibilityElement to NO 但这对 OSX 没有影响 从 VoiceOver 隐藏元素的正确方法是
  • Firebase LatLng 缺少不带参数的构造函数

    我将坐标存储在实时数据库中 但在尝试检索数据时收到错误消息 错误信息是 com google firebase database DatabaseException com google android gms maps model Lat
  • np.argsort 和 pd.nsmallest 给出不同的结果

    示例数据和代码如下 import pandas as pd import numpy as np np random seed 2021 dates pd date range 20130226 periods 90 df pd DataF
  • 由于 Windows 更新,Azure 云服务应用程序(Web 角色)偶尔会停机约 10 分钟?我该如何安排它们?

    它似乎每隔几个月左右就会发生一次 虽然它通常会在大约 10 分钟内自动恢复 但我仍然想了解如何更改 Windows 更新计划 因为它经常在工作时间发生 我们在各种 Azure 订阅中有多个 Web 应用程序 它们都以这种方式运行 一旦我们收
  • 并排 div

    如何并排放置两个 div 并在它们之间使用分离器 那就是我的意思 我假设 html 布局看起来像这样 div div div div div div div div or div div div div div div div div ht