程序员经验分享-hwhale

如何在一个大的div盒子里面设置左右两个小div盒子模块。

2023-11-16

学习目标：

如何在一个大的div盒子里面设置左右两边两个小div盒子。

学习内容：

1、 通过flex实现效果 2、 通过浮动实现效果 3、 通过绝对定位实现效果

方法一：

通过flex布局实现： 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>通过flex布局实现</title>
	</head>
	<body>
	<div class="big_box">
		<div class="left_box">我是左边的盒子</div>
		<div class="right_box">我是右边的盒子</div>
	</div>
	</body>
	<style>
		.big_box{width: 400px;height: 400px;background-color: blue;display: flex;}/* 设置大盒子的布局为flex布局 */
		.left_box{width: 200px;height: 200px;background-color: gold;}
		.right_box{width: 200px;height: 200px;background-color: greenyellow;}
	</style>
</html>

效果图：
在这里插入图片描述

方法二：

通过左浮动有浮动来实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>通过浮动实现</title>
	</head>
	<body>
	<div class="big_box">
		<div class="left_box">我是左边的盒子</div>
		<div class="right_box">我是右边的盒子</div>
	</div>
	</body>
	<style>
		.big_box{width: 400px;height: 400px;background-color: blue;}
		.left_box{width: 200px;height: 200px;background-color: gold;float: left;}/* 左边模块左浮动 */
		.right_box{width: 200px;height: 200px;background-color: greenyellow;float: right;}/* 右边模块右浮动 */
	</style>
</html>

（效果图同方法一）

方法三：

通过绝对定位来实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>通过绝对定位实现</title>
	</head>
	<body>
	<div class="big_box">
		<div class="left_box">我是左边的盒子</div>
		<div class="right_box">我是右边的盒子</div>
	</div>
	</body>
	<style>
		body{padding: 0px;margin: 0px;}/* 先消除游览器本身的边距 */
		.big_box{width: 400px;height: 400px;background-color: blue;}
		.left_box{width: 200px;height: 200px;background-color: gold;display: inline-block;}/* display:inline-block的目的是将对象呈递为内联对象 （div不再占一整行了）*/
		.right_box{width: 200px;height: 200px;background-color: greenyellow;display: inline-block;position: absolute;left: 200px;}/* 通过绝对定位放置div的位置 */
	</style>
</html>

（效果图同方法一）

总结：

因为div属于块级元素，所以它默认会占一整行，所以要实现div里面的div左右两边布局需要改变div的样式。目前总结出上文三种比较常用的方法，当然远远不止上面所说的方法，其他的可以在以后慢慢发现。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html基础

html

css

定位

html5

如何在一个大的div盒子里面设置左右两个小div盒子模块。 的相关文章

  • Javascript 播放声音性能重吗？

    我正在用 Javascript 制作一个简单的游戏 当一个物体与墙壁碰撞时 它会发出 砰 的声音 声音的响度取决于物体的速度 速度越高 gt 声音越大 播放功能 playSound function id vol ID of the sou

  • 固定宽度可变高度网格CSS

    我们如何在网格布局中实现固定宽度和可变高度 就像www pinterest com http www pinterest com主页布局 我认为他们正在使用 Javascript 只是想知道是否还有其他方法 只需使用float left不管

  • 使用画布仅删除文本而不删除图像

    我正在尝试删除画布元素中的文本 而不丢失Background Image of the Canvas Element 我想我需要保存Imagesrc并把它还给Canvas Element之后clearRect 但我不知道该怎么做 我希望有人

  • JSF 2.1 中的 HTML 4 <按钮>

    我想使用以下命令 The JSF

  • php中的条件格式化html表与时间戳比较

    echo table style width 100 tr echo td Order td echo td Destination td echo td Location td echo td Status td echo td Time

  • 如何隐藏 URL 中的锚标记

    如何隐藏地址栏中以下链接 href 的哈希值 a href index php dev name 所以它会将我重定向到index php dev name 但我希望地址栏只显示index php 您可以使用 Javascript oncli

  • 使用 CSS 自定义字体？

    我见过一些在其网站上使用自定义字体的新网站 除了常规的 Arial Tahoma 等 他们支持大量的浏览器 如何做到这一点 同时 如果可能的话 还会阻止人们免费下载该字体 一般来说 您可以使用自定义字体 font face在你的 CSS 中

  • CSS设置默认滚动位置

    有没有办法将滚动位置设置为默认值 我知道如何在 javascript 中做到这一点 例如使用 jquery div divWithScroll attr scrollTop 200 但我只想用CSS来做 我不知道是否可行 不 CSS 中没有

  • 如何将udp发送到udp node.js服务器？

    我对此很陌生 所以我真的不知道我在做什么 但我已经设置了一个 node js udp 服务器 我想从客户端 来自网站 向它发送一个数据包 但我不知道如何在 javascript 中做到这一点 或者是否可能 我不是在研究如何从 Node js

  • 用隐藏单元格补充 colspanned 表格有什么不好吗？

    我一直在表格上开发一些排序和选择功能 我发现在具有跨单元格的表格中定位非常困难 我只是添加了跨区单元格并将其隐藏 它看起来不错 它与我的 js 一起工作 非常适合索引 但我想知道这是否是合法的方法 stuffing display none

  • jquery 验证错误位置

    这看起来很简单 但我无法弄清楚 我正在使用 jquery 验证插件 我验证所有文件 但我想要的是在输入文本行中显示验证消息警报 例如在电子邮件输入中 请填写电子邮件地址 但现在它出现在所有字段下 在我的html中

  • 如何使用canvas.toDataURL()将画布保存为图像？

    我目前正在构建一个 HTML5 Web 应用程序 Phonegap 本机应用程序 我似乎不知道如何将画布保存为图像canvas toDataURL 有人可以帮我吗 这是代码 有什么问题吗 我的画布被命名为 canvasSignature J

  • 如何为背景图像添加边距？

    我想向背景图像添加边距 以便将其与屏幕中间保持距离 但将其添加到该类中会为整个主体添加边距 body poppage background url Imagenes tip3 png 50 200px no repeat E2E4E9 我怎

  • 如何并排放置两个

    我有两个 div 我想要并排放置的元素 如下所示 navigation content 我想要导航 div 根据需要尽可能大 但不能更大 收缩以适应行为 内容 div 然后应该填充剩余的空间 如何在不指定百分比 例如 20 80 的情况下使

  • 按百分比设置 bootstrap 模态身高

    我正在尝试制作一个带有主体的模态 当内容变得太大时 该主体会滚动 但是 我希望模式能够响应屏幕尺寸 当我将最大高度设置为 40 时 它没有任何效果 但是 如果我将最大高度设置为 400px 它会按预期工作 但不会响应 我确信我只是错过了一些

  • 如何更改 Bootstrap 3 div 列顺序

    正在做我的第一个响应式设计 在 Bootstrap 3 中可能会出现类似的情况 在 lg 上更改此设置 a b c sm 上的这个 a c b 您可以使用两个 div 一个用于第一类型的布置 另一个用于第二类型的布置 第一个仅在 lg 中显

  • 如何延迟加载嵌入在 iframe 上的 YouTube 视频？

    如何将延迟加载应用于iframe嵌入视频 我尝试添加loading eager loading auto and loading lazyload 您可以使用srcdoc你里面的属性iframe标签来加载图像 请参阅以下示例作为参考

  • Google Chrome 106 可拖动导致元素消失

    使用拖放元素时 绝对定位元素中包含的大多数其他元素都会从屏幕上消失 如果我调整窗口大小 这些元素会出现 但在开始拖动时会再次消失 我在最新版本的 Google Chrome 106 和 Beta 版本 107 0 5304 18 以及现在的

  • 我可以停止 :hover 应用于元素吗？

    假设我有一些 CSS button hover font weight bold 我怎样才能防止 hover随意应用样式 我的目标用例是当元素被禁用时 例如 使用这个 HTML

  • Twitter 嵌入时间轴小部件

    我继续下载http platform twitter com widgets js http platform twitter com widgets js And the http platform twitter com embed t

随机推荐

热门标签