首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何拥有两个div,一个在父div的左侧,另一个在父div的右侧?

要实现一个在父div的左侧和右侧的布局,可以使用CSS的浮动或者定位属性来实现。以下是两种常见的方法:

方法一:使用浮动属性 HTML代码:

代码语言:txt
复制
<div class="parent">
  <div class="left"></div>
  <div class="right"></div>
</div>

CSS代码:

代码语言:txt
复制
.parent {
  overflow: hidden; /* 清除浮动 */
}

.left {
  float: left;
  width: 50%;
}

.right {
  float: right;
  width: 50%;
}

优势:简单易懂,适用于大多数场景。

方法二:使用定位属性 HTML代码:

代码语言:txt
复制
<div class="parent">
  <div class="left"></div>
  <div class="right"></div>
</div>

CSS代码:

代码语言:txt
复制
.parent {
  position: relative;
}

.left {
  position: absolute;
  left: 0;
  width: 50%;
}

.right {
  position: absolute;
  right: 0;
  width: 50%;
}

优势:可以更精确地控制元素的位置和大小。

推荐的腾讯云相关产品和产品介绍链接地址:

  • 腾讯云云服务器(CVM):https://cloud.tencent.com/product/cvm
  • 腾讯云云数据库 MySQL 版:https://cloud.tencent.com/product/cdb_mysql
  • 腾讯云对象存储(COS):https://cloud.tencent.com/product/cos
  • 腾讯云人工智能:https://cloud.tencent.com/product/ai
  • 腾讯云物联网平台:https://cloud.tencent.com/product/iotexplorer
  • 腾讯云移动开发:https://cloud.tencent.com/product/mobdev
  • 腾讯云区块链服务:https://cloud.tencent.com/product/tbaas
  • 腾讯云元宇宙:https://cloud.tencent.com/product/tencent-metaverse
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

C#报错——(Winform) 某个线程上创建控件不能成为另一个线程上创建控件

问题点描述:   我新建一个线程,并在这个线程中,把某个控件级去掉或者更改,导致报这个异常 网上解析如下:   “Windows 窗体”使用单线程单元 (STA) 模型,因为“Windows 窗体...如果您在控件中为大量占用资源任务使用多线程,则用户界面可以背景线程上执行一个大量占用资源计算同时保持可响应。 用人话描述为:控件是属于主线程(UI线程),不可以跨线程修改其父级。...this.Controls.Add(tb); } } 看起来感觉很绕,而且很麻烦,又要新建方法,又要新建委托 所以我把它简化如下:           //使用拉姆达表达式创建一个委托...,委托里面修改控件级           Action delega1 = () => { tabPageIO.Parent...,线程里面调用拉姆达表达式,拉姆达表达式里面使用异步形式调用委托,委托里面再修改控件级 new Thread(() => this.Invoke(delega1

3.3K41
  • 【布局】493- 工作中遇到特殊CSS布局

    多条件留白布局 图中有两个内容块A和B,他们宽度取决于内容宽度,左右侧留白有max-width: 200px限制,中间留白有min-width: 150px限制。...短文件名: 长文件名: 首先需要使用JS对文件名进行裁剪,拆分出两部分:非扩展名部分和扩展名部分,放置两个相邻元素中。 当文件名宽度 级宽度时,左侧元素宽度取决于内容,达到最大值后文本截断显示缩略号,右侧元素随左侧元素向右移,一直保持自身宽度不缩放。 对于这样问题,很自然就想到flex-shrink。...flex-shrink用来设置当元素宽度小于所有子元素宽度和时(即子元素会超出元素),子元素如何缩小自己宽度。...因为字符宽度不一致,不能使用字体大小*字体长度方式,需要将字符插入一个元素,然后获取元素宽度。 对于一个长列表来说,这个方式太耗性能。 权衡利弊之下,所以选择flex去实现。

    1.1K10

    理解CSS布局和块格式化上下文

    [image.png] 进行html布局及css编写时候,你是否遇到过这样问题: 子元素设置浮动脱离文档流后,元素无法将其完全包裹 子元素浮动实现两栏布局时,另一个子元素与浮动子元素重叠 垂直方向外边距...常见应用场景 使元素包含浮动元素 下面例子解释如何让浮动内容和元素等高,清楚浮动负面影响 html I am a floated....outer { overflow: auto; } [enter image description here] BFC防止垂直外边距重叠 外边距折叠规则是:当两个块级元素相邻并且一个块级格式化上下文时... css .float{ float: left; } [enter image description here] 这时候如果不想要右侧文字环绕浮动文字盒子,左侧div...设置浮动情况下,我可以通过使右边div成为BFC,使两个兄弟div互相隔离、互不影响,从而达到去除文字环绕效果。

    2.1K30

    【CSS】固定定位示例 ( 屏幕左右两侧广告栏 | 开发要点分析 | 代码示例 )

    一、开发要点分析 ---- 实现下图样式 : 中间部分是网页内容 , 左右两侧是 固定广告栏 , 不管浏览器如何滚动 , 缩放 , 该左右两侧广告栏不变 ; 标签结构分析 : 上述页面中 , 中心版心盒子...与 左侧广告栏 / 右侧广告栏 是兄弟关系 ; 左侧广告栏 使用 固定定位 , 该盒子浏览器左侧 , 距离顶部 100 像素 ; 右侧广告栏 与 左侧广告栏基本相同 , 只是将 左边偏移...改为 右边偏移 ; /* 固定定位 - 浏览器左侧元素 */ .left { position: fixed; /* 该盒子浏览器左侧 */ /* 上边偏移 0 紧贴顶部...*/ .right { position: fixed; /* 该盒子浏览器右侧 */ /* 上边偏移 0 紧贴顶部 */ top: 100; /* 右边偏移 0

    84030

    【CSS】定位 ⑤ ( 子元素绝对定位 元素相对定位 | 代码示例 )

    一、子元素绝对定位 元素相对定位 ---- 绝对定位 要和 带有定位 容器 搭配使用 ; 子元素 使用绝对定位 , 元素要使用 相对定位 ; 子元素使用 绝对定位 , 布局中不会保留其位置..., 子元素完全依赖 容器 位置 , 此时就要求容器必须稳定 , 如果容器使用了 绝对布局 , 容器就不会保留位置 , 而子元素又依赖元素 , 这时元素建议使用相对定位 , 这样能保证页面的稳定性...; 级元素 需要 占位 , 必须使用 相对定位 ; 子元素 需要 任意摆放 , 必须使用绝对定位 ; 二、代码示例 ---- 元素使用相对定位 , 子元素使用绝对定位 ; 两个子元素分别放置 左侧右侧...background-color: pink; } /* 子元素设置绝对布局 */ .son { /* 绝对布局 */ position: absolute; /* 放置左侧中心位置...background-color: blue; } /* 子元素设置绝对布局 */ .son2 { /* 绝对布局 */ position: absolute; /* 放置右侧中心位置

    1.9K20

    深入学习下 CSS 间距相关知识

    边距折叠 简而言之,当两个垂直元素有一个边距,并且其中一个边距大于另一个时,就会发生边距折叠。 在这种情况下,将使用较大边距,而忽略另一个边距。...editors=1100 另一个与边距折叠相关示例是子级和级,让我们假设以下内容: HTML: I'm the child...负边距 它可以与四个方向边距一起使用,某些用例中非常有用。 让我们假设以下内容: 级有 padding: 1rem,这导致子级从顶部、左侧右侧偏移。 但是,子元素应该紧贴其父元素边缘。...> 标题在左侧右侧有填充,这样做目的是防止内容粘在边缘。...以下是我想到一些问题: 间隔组件如何组件中获取其宽度或高度?它将如何在水平和垂直布局中工作?例如:堆栈内间隔符与添加左侧空间间隔符。

    13.4K40

    译|CSS中间距,前端开发中各种设置间距优点缺点及实例

    例如,在上一个示例中,我添加了 margin-bottom:1rem 两个堆叠元素之间添加垂直间距。...margin 折叠 简而言之,当两个垂直元素具有margin,并且其中一个元素margin大于另一个元素时,发生边距折叠。在这种情况下,将使用更大margin,而另一个将被忽略。 ?...另一个与边距折叠相关例子是子节点和节点。...负margin 它可以与四个方向一起使用以留出余量,某些用例中非常有用。让我们假设以下内容: ? 节点具有 padding:1rem,这导致子节点从顶部、左侧右侧偏移。...Header左侧右侧都有padding,这样做目的是防止内容物紧贴在边缘上。

    12K10

    【移动端网页布局】流式布局案例 ③ ( 实现搜索栏功能 | 伪元素选择器 | 子绝相 | 外边距塌陷处理 | 二倍精灵图处理方案 )

    , 如果 拉长浏览器宽度 , 搜索栏也会跟着拉长 ; 实现自动伸缩效果 : HTML 标签结构如下 : 最外层容器 容器内部两个半圆形子容器 ; 中间部分可自动伸缩子容器盒子 半圆子容器...margin: 14px 0 0 15px; } 右侧登录按钮 , 尺寸也是 40 x 44 大小 , 该按钮盒子通过定位设置 ; 右侧按钮直接写上 " 登录 " 两个字 , 垂直居中 , 行高 =..., 需要设置 7 像素 上边距 , 使得该搜索栏可以垂直居中 ; 如果为中间搜索栏盒子设置一个 7 像素外边距 , 会导致外边距塌陷 , 将左右两侧按钮都带下来 ; 外边距塌陷解决方案是 为 容器...-- 左侧列表按钮 --> 登陆 完整代码 : <!

    2K30

    【移动端网页布局】流式布局案例 ⑤ ( 连续排列链接图片 | 设置盒子圆角 | 超出部分隐藏 | 设置浮动布局 | 精确计算浮动元素宽度避免换行 | 设置图片宽度自适应 )

    , 放置 单独 标签中 , 每个 标签中放置一个 链接标签 , 链接标签中包裹一个 图片 ; <!...3、设置圆角和超过部分隐藏 布局 左上角 和 右上角 都有一个圆角 , 并且矩形图片超过圆角部分被隐藏了 , 设置圆角和超出部分隐藏样式 : .brand { /* 设置圆角后 超过圆角图片不再显示...{ /* 设置 .brand 容器下 div 盒子左浮动 这样这些盒子可以水平方向上紧密排列 */ float: left; /* 要在水平方向上放置 3...border-radius: 10px 10px 0 0; } .brand div { /* 设置 .brand 容器下 div 盒子左浮动 这样这些盒子可以水平方向上紧密排列.../* 设置图片链接中图片 水平方向上充满容器即可 */ width: 100%; } 3、展示效果

    3.6K20

    Vue非父子组件之间传值

    我们可以把一个网页拆分成很多部分,每个部分就是我们代码中一个组件,左侧整个区域代表方块1,拆分成3个灰色区域代表方块2,左下区域又分成更小2个深色区域,分别用2个方块3表示,右侧拆分成更小3个深色区域用...3个方块3表示 所以,左侧网页就可以用右侧图来表示,一个复杂网页,最终都可以拆分成小组件。...-- 两个child是兄弟组件,不是父子关系 --> ...每个组件都是vue实例,我们Vue原型中定义bus属性,这是一个vue实例,相当于全局总线,等同在ES6class Vue中定义,只要以后new Vue实例或者创建组件时候,每个组件上都会有bus...这里如果点"lcy", 现在目标是希望点击其中一个组件时候,另一个组件跟着改变自己内容 <!

    1.6K10

    为什么要清除浮动及如何清除浮动

    浮动其实是指元素从网页正常流动中移除,即脱离文档流。选择将元素在其容器左侧右侧放置其实就是指元素脱离文档流之后,元素一直向最左边或者右边靠拢,直至碰到元素或者另一个浮动元素。...大家请看图一,盒子未设置高度时,子盒子又设置了浮动,导致盒子高度塌陷,因为盒子计算高度时并未将浮动子盒子算入。 所以我们要避免这种情况,也就是清除浮动,使得结果如同图二或者图三。...那我们要如何清除浮动呢?...使用clear属性 额外标签法(不是很推荐) 这种方法见如下代码 其实就是盒子浮动子盒子之后加入一个额外块级盒子,为其设置属性clear:both clear:both意思可以参考这个博客,讲很好...(推荐) 这种方法呢,是比较推荐大家使用,因为它是利用伪元素产生盒子 代码如下,就是为盒子after中添加如下属性,其中不可省略属性是content:""、display:block、clear

    1K20

    CSS常用实例,web前端开发者不知道这些就太low了

    -- 表格实现左右布局最简单, 两个td搞定, 这里我就不写详细CSS了。 好处:不用考虑左右内容高度,两个td高度始终相同,也不用清除浮动 坏处:但总是感觉这种实现方式比较low,不够优雅。...-- 对上面的方法稍加改动,左侧浮动+定位,右侧设置margin-left来实现。...这种实现方式是很多博客中左侧固定菜单,右侧内容弹性布局最常用实现方式 --> .panel { overflow: hidden; } .p-left {...class="panel"> 三、元素宽高等比放大缩小 相信不少同学移动端网页开发中,都插入过图片吧,试问一下,你图片比例是否可以跟随屏幕尺寸变化而不变?...-- 到现在你应该思考一个问题,width, height百分比,是以谁为标准设置? 它们都是以元素宽高为标准,然后取对应百分比值。

    1.8K120

    css display属性值及用法_css clear作用

    会让inline元素居中 同时从上图可以看到两个inline标签之间出现了奇怪间隔,改间隔原因是div换行产生换行空白,解决办法 将两个inline标签写到一行 <div...设计过程中有时需要设计一个div宽高都是整个屏幕,整个时候宽度很好设置,可是高度一般很难设置,因为页面一般都是可以滚动,所以高度一般可变,所以这个时候可以使用一个小技巧,如下。...justify-content: 属性定义了项目主轴上对齐方式。 align-items: 属性定义项目交叉轴上如何对齐。.../blo… 实例:实现一个固定宽度但内容可变列表 目前我有一个需求,有一个列表页,左侧固定,右侧固定,总宽度固定,但是左侧内容可能会增加,右侧内容也可能会增加,要求平时一行展示,增加时候两行展示...,左侧两行,右侧还是一行,并且都居中。

    2.4K10

    【Web APIs】JavaScript 操作元素 ⑥ ( 关闭对话框案例 | display 属性简介 | 页面标签结构和样式 | 盒子模型细节 | 绝对布局要点 - 设置负值即可超出容器模型 )

    操作 修改表单元素属性 ; 【Web APIs】JavaScript 操作元素 ④ ( 修改元素属性示例 | 密码表单标签结构 | 密码输入框样式设置 | 右侧图标按钮设置 | JavaScript...修改元素属性示例 ) 博客中 , 开发了一个 密码输入框案例 , 点击右侧按钮可 显示 / 隐藏 密码文本内容 , 实际上就是 切换 input 表单类型 type text / password...分析了 操作 元素样式属性 三种方式 : 行内样式操作 , 类名样式操作 , 类列表样式操作 ; 一、案例需求 页面中 , 设置一个对话框 , 点击对话框左侧 x 按钮 , 关闭对话框 ; 二、案例核心要点...属性 ; 2、display 属性简介 标签元素 display 属性 可用于定义一个元素如何在页面上显示 , 该属性 控制了元素盒模型特性 , 如 : 尺寸、布局方式和如何处理与其他元素关系...一个布局 可以看做一个 矩形 盒子模型 , 该 盒子模型 是一个用于 容纳 标签元素 容器 ; 盒子模型 组成 : 由内到外顺序如下 : 内容 Content : 下图中 内容为 100 x 100

    10910

    前端系列第4集-解释下浮动和它工作原理,清除浮动方法

    比如,我们可以使用浮动来实现一个左侧导航栏、右侧主体内容页面布局。 浮动工作原理很简单。当一个元素设置为浮动后,它会尝试尽可能地向左或者向右移动,直到遇到包含它容器边界或者其他浮动元素。...我们可以包含浮动元素容器中添加一个div元素,并且给这个元素设置clear:both属性,然后通过JavaScript来计算出容器实际高度,将这个高度赋值给空div元素。...通过 float 属性,可以使一个元素脱离正常文档流,沿其容器左侧右侧边缘排列。浮动通常用于实现文本环绕图片、创建多列布局等效果。...工作原理 当一个元素应用 float 属性后,它会沿其父容器左侧右侧边缘浮动。其他非浮动元素将不会覆盖浮动元素,而是环绕它。同时,浮动元素里面的文本和内联元素也会环绕浮动元素。...需要注意是,浮动元素只会影响其后同级元素。 举个例子,你可以为一个图片元素设置 float: left,这会使图片沿容器左侧浮动,同时后面的文本会环绕这个图片。

    38020

    Vue之组件化(三)

    一、父子组件通信--传子 一.回顾父子组件 子组件组件中注册并使用,html中使用组件标签,子组件也会被展示。...但是,当我点击左侧边蓝色组件中手机数码时,该蓝色组件要将点击手机数码事件发送给红色组件,红色组件根据发送过来事件再次发送网络请求获取手机数码数据,右侧组件又通过props获取手机数码数据并展示...二、子组件如何组件传递自定义事件 首先展示按钮组件 <...举例: 组件通过$children方法直接获取两个子组件对象 ...当子组件过多时,往往不能确定他索引值,所以引进了新访子方式$refs 3.3、直接访子缺点 虽然可以通过$children方式直接获取子组件对象,进而获取子组件中方法和数据,但是一个组件中直接获取另一个组件去操作数据和方法方式

    56420

    【CSS】绝对定位元素设置 水平 垂直 居中 ( 绝对定位元素居中设置 - 先偏移 50% 再回退子元素一半尺寸 | 绝对定位居中设置 )

    盒子一半 宽度 / 高度 偏移量 ; 以 水平居中为例 : 200 x 200 大小盒子 , 通过设置 首先 , 设置 left 左边偏移为 50% , 让子元素左侧 移动到 容器水平中心位置...; /* 该盒子容器左上角 */ /* 上边偏移 0 紧贴顶部 */ top: 0; /* 左边偏移 50% 左侧紧贴水平居中位置 */ left: 50%;...: absolute; /* 该盒子容器右下角 */ /* 顶部移动到垂直中心位置 */ top: 50%; /* 右边偏移 0 紧贴右侧 */ right: 0;...*/ position: absolute; /* 该盒子容器左上角 */ /* 上边偏移 0 紧贴顶部 */ top: 0; /* 左边偏移 50% 左侧紧贴水平居中位置...*/ position: absolute; /* 该盒子容器右下角 */ /* 顶部移动到垂直中心位置 */ top: 50%; /* 右边偏移 0 紧贴右侧 */

    2.4K40

    CSS中浮动和清除浮动,梳理一下!

    浮动核心就一句话:浮动元素会脱离文档流并向左/向右浮动,直到碰到元素或者另一个浮动元素。请默念3次! 浮动最初设计目的并没那么多事儿,就只是用来实现文字环绕效果而已,如下所示: ?...文字环绕效果 但是早期前端开发者发现:浮动元素可以设置宽高并且可以内联排列,是介于inline和block之间一个神奇存在,inline-block出来之前,浮动大行其道。...浮动可以内联排列 浮动会向左/向右浮动,直到碰到另一个浮动元素为止,这是浮动可以内联排列特征。也就是说,浮动可以设置宽高,并且能够一行多个,是介于block和inline之间存在。 ?...BFC主要特征 BFC容器是一个隔离容器,和其他元素互不干扰;所以我们可以用触发两个元素BFC来解决垂直边距折叠问题。 BFC可以包含浮动;通常用来解决浮动元素高度坍塌问题。...文字环绕效果 页面布局 浮动可以实现常规多列布局,但个人推荐使用inline-block。 浮动更适合实现自适应多列布局,比如左侧固定宽度,右侧根据元素宽度自适应。 ?

    1.6K70
    领券