CSS div布局 嵌套

最新推荐文章于 2023-12-11 17:04:41 发布
最新推荐文章于 2023-12-11 17:04:41 发布
阅读量1.1k 收藏 6
点赞数 1
分类专栏： HTML教程 文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/quickreg201112/article/details/132696824
版权

CSS div布局 嵌套 | 小步教程

CSS div布局 嵌套

div布局包括行布局与列布局的不断嵌套。

以下列页面结构为例，实现如下页面的整体结构。

img

实现效果如下：

img

本例基本步骤

第1步：整体划分为两列；

第2步：第1列划分3行；

第3步：第2列继续划分为2列；

第4步：第2-2列划分为3行；

声明

声明1：我们只实现结构，并不实现细节。

声明2：为方便大家初学，样式我们不考虑公用，只公用了clearfix清除浮动，其余直接写style属性。

声明3：div的id并未进一步使用，仅为我们表达需要。

声明4：为div加了边框、宽高、边距，为方便大家看出效果，并不是实际需要。

重点关注：div实现行与列的划分；clearfix、float:left的使用。

第1步：整体划分为两列

img

<head>
    <meta charset="UTF-8">
    <title>CSS div布局 嵌套v1 | 小步教程</title>

    <style>
        .clearfix::after{
            content: '';
            display: block;
            clear: both;
        }

    </style>
</head>

<body>
    <!-- 第1行 -->
    <div id="div_xiaobuteach" class="clearfix" style="border: 1px solid #2C7C93;">
        <!-- 第1列 -->
        <div id="div1" style="float:left;   border: 1px solid #f00;margin: 10px;width: 100px;height: 400px;">
            第1列
        </div>
        <!-- 第1列结束 -->

        <!-- 第2列 -->
        <div id="div2" class="clearfix" style="float:left;   border: 1px solid #0f0;margin: 10px;width: 400px;height: 400px;">
            第2列
        </div>
        <!-- 第2列 结束 -->
    </div>
    后续内容
</body>

<div id="div_xiaobuteach">被分成多列，外层需要加clearfix，内层需要加float:left。

第2步：第1列划分3行

img

代码

<!-- 第1列 -->
<div id="div1" style="float:left;   border: 1px solid #f00;margin: 10px;width: 100px;height: 400px;">
    <div id="div1_1" style="border: 1px solid #00f;margin: 10px;">第1-1行</div>
    <div id="div1_2" style="border: 1px solid #00f;margin: 10px;">第1-2行</div>
    <div id="div1_3" style="border: 1px solid #00f;margin: 10px;">第1-3行</div>
</div>
<!-- 第1列结束 -->

<div id="div1">被分成3行，直接加3个div即可。（分成多列才要clearfix+float）

第3步：第2列继续划分为2列

img

<!-- 第2列 -->
<div id="div2" class="clearfix" style="float:left;   border: 1px solid #0f0;margin: 10px;width: 400px;height: 400px;">
    <div id="div2_1" style="float:left;   width: 250px;height: 350px;border: 1px solid #00f;margin: 10px;">
        第2-1列
    </div>
    <div id="div2_2" style="float:left;   width:100px;height: 350px;border: 1px solid #00f;margin: 10px;">
        第2-2列
    </div>
</div>
<!-- 第2列 结束 -->

<div id="div2">被分成2列，所以它需要加clearfix，里层的div需要加float:left。

所以div2既有clearfix，又有float:left。

第4步：第2-2列划分为3行

img

<div id="div2_2" style="float:left;   width:100px;height: 350px;border: 1px solid #00f;margin: 10px;">
    <div id="div2_2_1" style="height: 60px;border: 1px solid #f00;margin:5px;">第2-2-1行</div>
    <div id="div2_2_2" style="height: 60px;border: 1px solid #f00;margin:5px;">第2-2-2行</div>
    <div id="div2_2_3" style="height: 60px;border: 1px solid #f00;margin:5px;">第2-2-3行</div>
</div>

div2_2里分3行，分行直接加div既可。

完整代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>CSS div布局 嵌套v4 | 小步教程</title>

    <style>
        .clearfix::after{
            content: '';
            display: block;
            clear: both;
        }

    </style>
</head>

<body>
    <!-- 第1行 -->
    <div id="div_xiaobuteach" class="clearfix" style="border: 1px solid #2C7C93;">
        <!-- 第1列 -->
        <div id="div1" style="float:left;   border: 1px solid #f00;margin: 10px;width: 100px;height: 400px;">
            <div id="div1_1" style="border: 1px solid #00f;margin: 10px;">第1-1行</div>
            <div id="div1_2" style="border: 1px solid #00f;margin: 10px;">第1-2行</div>
            <div id="div1_3" style="border: 1px solid #00f;margin: 10px;">第1-3行</div>
        </div>
        <!-- 第1列结束 -->

        <!-- 第2列 -->
        <div id="div2" class="clearfix" style="float:left;   border: 1px solid #0f0;margin: 10px;width: 400px;height: 400px;">
            <div id="div2_1" style="float:left;   width: 250px;height: 350px;border: 1px solid #00f;margin: 10px;">
                第2-1列
            </div>
            <div id="div2_2" style="float:left;   width:100px;height: 350px;border: 1px solid #00f;margin: 10px;">
                <div id="div2_2_1" style="height: 60px;border: 1px solid #f00;margin:5px;">第2-2-1行</div>
                <div id="div2_2_2" style="height: 60px;border: 1px solid #f00;margin:5px;">第2-2-2行</div>
                <div id="div2_2_3" style="height: 60px;border: 1px solid #f00;margin:5px;">第2-2-3行</div>
            </div>
        </div>
        <!-- 第2列 结束 -->
    </div>
    后续内容
</body>

</html>
小步2023
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS 嵌套DIV布局(position属性)
09-25
如果内层DIV将position属性设置为absolute，并设置left，和top等属性，还需要考虑外层DIV的position属性设置。
DIV嵌套相关实例
不抛弃、不放弃：Aaron莫言
09-10 1827
相关代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> .div-body{ overflow:auto; height:...
div 内的div 一行一排改成自动换行
韩梦飞沙_韩亚飞
03-01 776
里面的子div 加上css 样式 float: left;
css+div横向排列自动换行
最新发布
weixin_40058289的博客
12-11 454
div 排列方式
DIV+CSS布局（一）
weixin_50632313的博客
09-23 1285
1.当父元素div不设置宽高且所有元素都不设置浮动时，父元素div会感知子元素的宽高，所以下面例子中，div的高为子元素的总高，又因为div是独占一行的，所以下面例子中div的宽度是满宽。6.在父元素div不设置宽高的情况下，让父元素可以感知子类的高度。1.将绿色和蓝色的div右浮动，并将红色div的宽和高设置为300px,证明浮动元素不占据位置，将元素排除在普通流之外。5.在父元素div不设置宽高的情况下，让父元素可以感知子类的高度。7.在父元素div不设置宽高的情况下，让父元素可以感知子类的高度。
自适应三栏式
m0_55041880的博客
07-21 349
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
CSS 分组和嵌套选择器：Grouping and Nest
梁辰兴的博客
09-20 449
这样，我们就可以实现div元素中的ul元素中的li元素继承div元素的样式，而不必重复定义相同的样式。分组选择器的优先级高于嵌套选择器，如果两个选择器的优先级相同，那么最后出现的选择器将覆盖前面的样式。这在你的样式表中有很多具有相同样式的元素时非常有用，比如标题和段落的文字都显示为灰色，你可以通过逗号将多个选择器分组放在一条样式声明的前面，这样可以达到多个选择器多条样式声明相同的效果。分组选择器的优先级高于嵌套选择器，如果两个选择器的优先级相同，那么最后出现的选择器将覆盖前面的样式。
div的嵌套
wangzhewln的博客
06-27 575
如需将此代码嵌入到 JSP 页面中，只需将 HTML 部分的代码复制到 JSP 页面的对应位置即可。<input type="submit" value="提交">中添加了一个表单元素，包括用户名和密码输入框以及一个提交按钮。的 JavaScript 函数，并将其绑定到内部。元素通过修改 CSS 样式的方式设置为不可见。-- 其他 HTML 代码 -->这个示例中，我们先创建了一个外部的。-- 表单代码 -->元素，以及一个嵌套在内部的。为了实现点击事件隐藏内部的。函数会被调用，将内部的。
用DIV套DIV实现水平居中布局和背景图片平铺(示例)
【敦厚的曹操】的专栏
05-05 3812
#login { width:100%; height:345px; background-color:#e2e8c4; } #login div { /* background-color:Green; */ h
div嵌套布局
Clarence_Pang的博客
11-20 3791
div 横向布局 display:inline
2.html对于div的嵌套使用
08-09
div标签的使用，自己用所学的一点点html做的
div+css 布局常识 8问
09-25
在网页设计中，`div+css`布局是创建现代网页的标准技术之一。下面将详细讨论在面试中可能会遇到的关于`div+css`布局的8个常见问题及其解决方案。 1. **超链接点击过后hover样式消失问题** 当超链接被点击后，`...
div+css整体布局
03-20
实现div+css的整体布局的实例，可以更好地理解这种布局，其中关于float用的比较多，还有div居中处理
Div+CSS简单布局
09-19
DIV+CSS布局，DIV嵌套使用，Div上下，左右布局，居中显示。
div嵌套居中的三种方法
shenyuhan的博客
10-20 2014
div嵌套居中的三种方法
DIV布局之道二：DIV块的嵌套，DIV盒子模型
denghan4400的博客
02-21 2297
本文讲解DIV块布局的第二种使用方式：嵌套。“DIV嵌套”在有些文献中也被称为“盒子模型”，说的通俗一点就是嵌套（一个大的DIV块内部又包含一个或多个DIV块）。 请看如下代码： CSS部分： CSS Code复制内容到剪贴板 /*嵌套样式*/ .contain{width:200px;height:160px;margin:20px;padding:10...
W3C 决定让 CSS 支持嵌套语法，你怎么看
前端达人
02-04 617
大家好，今天告诉大家一个好消息，CSS要支持类似Sass框架的嵌套语法了，不需要任何框架，就可以很方便的使用，是不是特别爽呢。那么我们一起看看这个想法和过程是如何产生的，有助于我们更好的理解这个 CSS 嵌套语法方案W3C 的年底充满了起起伏伏，该组织与麻省理工学院之间的辩论最终在去年圣诞节前夕得到解决，这要归功于两个组织的领导。幸运的是，它并没有影响 CSS 嵌套的工作，这个新特性不仅在 CSS...
嵌套CSS规则
JEFF_xieyuzhi的博客
06-05 1749
嵌套CSS规则2. 嵌套CSS规则2-1. 父选择器的标识符&2-2. 群组选择器的嵌套2-3. 子组合选择器和同层组合选择器： >、+和 ~2-4. 嵌套属性 2. 嵌套CSS规则 2-1. 父选择器的标识符& 伪元素 : hover <article> Lorem ipsum dolor sit amet <a href="https://www.sass.hk/guide">了解：父选择器的标识符&&lt
css div 多重嵌套
04-02
可以通过多层嵌套 div 元素来创建复杂的布局和样式。例如： ```html <div class="container"> <div class="header"> <h1>Page Title</h1> </div> <div class="content"> <div class="sidebar"> <h2>Sidebar Title</h2> <ul> <li>Link 1</li> <li>Link 2</li> <li>Link 3</li> </ul> </div> <div class="main"> <h2>Main Content Title</h2> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque, voluptas!</p> </div> </div> <div class="footer"> <p>Copyright © 2021</p> </div> </div> ``` 在上面的示例中，我们使用了四个嵌套的 div 元素来创建一个简单的页面布局。每个 div 都有一个不同的类名，以便我们可以对其进行样式化。我们可以使用 CSS 来为每个类添加样式，例如： ```css .container { max-width: 960px; margin: 0 auto; } .header { background-color: #f2f2f2; padding: 20px; } .content { display: flex; } .sidebar { flex-basis: 25%; background-color: #e6e6e6; padding: 20px; } .main { flex-basis: 75%; padding: 20px; } .footer { background-color: #f2f2f2; padding: 20px; } ``` 在上面的 CSS 中，我们使用了一些常见的布局属性，如 display、flex 和 flex-basis，来控制页面的外观和行为。我们还使用了背景颜色、填充和边距等属性来添加一些样式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值