在一个div中设置左右各一个div布局
在一个div中设置左右各一个div布局
大的DIV中嵌套两个小的DIV一左一右步骤如下:
1,首先,图中显示的Web结构是html和css。
2,打开html页面,如图所示,定义一个大div和两个小div。
3,最常用的float float,只要两个小div的宽度小于或等于大div的宽度,就可以并排实现。
4,使用position进行绝对定位,然后使用margin-left删除第一个小div的宽度。
5,使用表格框并排实现div,这是相同的宽度。
6,如图所示,这是上面三种方法运行后的结果,可以看到两个大DIV嵌套在一个大DIV中。
出处:https://zhidao.baidu.com/question/349729913.html
=======================================================================================
如何在div里面设置左右两个小div模块
学习目标:
如何在一个大的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的样式。目前总结出上文三种比较常用的方法,当然远远不止上面所说的方法,其他的可以在以后慢慢发现。
出处:https://blog.csdn.net/big_beer/article/details/115466598
=======================================================================================
DIV 左右布局方案
本文内容大多基于官方文档和网上前辈经验总结,经过个人实践加以整理积累,仅供参考。
实际项目开发过程中遇到页面 DIV 左右布局的需求:左侧 DIV 固定宽度,右侧 DIV 自适应宽度,填充满剩余页面,由此引申出本文的几种解决方案
1 左侧 DIV 设置 float
属性为 left
,右侧 DIV 设置 margin-left
属性等于或大于左侧 DIV 宽度
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>Insert title here</title>
<style>
.left {
float: left;
width: 300px;
height: 300px;
background-color: red;
}
.right {
background-color: orange;
margin-left: 310px;
height: 300px;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
</body>
</html>
实际效果:
2 左侧 DIV 设置 float
属性为 left
,负边距 100%,右侧 DIV 中嵌套一个 DIV,页面内容放入嵌套的 DIV 中,右侧内嵌 DIV 设置 margin-left
属性等于或大于左侧 DIV 宽度
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>Insert title here</title>
<style>
.left {
float: left;
width: 300px;
height: 300px;
background-color: gray;
margin-right: -100%;
}
.right {
float: left;
width: 100%;
}
.right-content {
height: 300px;
margin-left: 310px;
background-color: black;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right">
<div class="right-content"></div>
</div>
</body>
</html>
实际效果:
3 如果将需求修改为右侧固定宽度而左侧自适应宽度
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>Insert title here</title>
<style>
.left {
float: left;
width: 100%;
height: 300px;
background-color: blue;
margin-right: -300px;
}
.right {
float: right;
width: 300px;
height: 300px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
</body>
</html>
实际效果:
出处:https://blog.csdn.net/silent_paladin/article/details/59141773
关注我】。(●'◡'●)
如果,您希望更容易地发现我的新博客,不妨点击一下绿色通道的【因为,我的写作热情也离不开您的肯定与支持,感谢您的阅读,我是【Jack_孟】!
本文来自博客园,作者:jack_Meng,转载请注明原文链接:https://www.cnblogs.com/mq0036/p/4604450.html
【免责声明】本文来自源于网络,如涉及版权或侵权问题,请及时联系我们,我们将第一时间删除或更改!
posted on 2015-06-27 18:50 jack_Meng 阅读(15805) 评论(1) 编辑 收藏 举报
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· DeepSeek “源神”启动!「GitHub 热点速览」
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器
2014-06-27 C# socket编程实践——支持广播的简单socket服务器
2014-06-27 简单理解Socket
2014-06-27 C#.NET通过Socket实现平行主机之间网络通讯(含图片传输的Demo演示)
2014-06-27 C# Socket笔记