html的div怎么使用 html中div的用法具体例子

编程之家2026-05-231128次浏览

大家好，关于html的div怎么使用很多朋友都还不太明白，今天小编就来为大家分享关于html中div的用法具体例子的知识，希望对各位有所帮助！

定义

<div>可定义文档中的分区或节（division/section）。

<div>标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。

如果用 id或 class来标记<div>，那么该标签的作用会变得更加有效。

用法

<div>是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是<div>固有的唯一格式表现。可以通过<div>的 class或 id应用额外的样式。

不必为每一个<div>都加上类或 id，虽然这样做也有一定的好处。

可以对同一个<div>元素应用 class或 id属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class用于元素组（类似的元素，或者可以理解为某一类元素），而 id用于标识单独的唯一的元素。

实例

文档中的一个部分会显示为绿色：

<h3>This is a header</h3>

<p>This is a paragraph.</p>

</div>

并排的话，你需要使用CSS的float属性，然后在设置浮动；

比如

</div>

这样，这个两个DIV标签就在同一行上了（同时靠左），当然有个前提，就是他们俩的父元素的宽度要至少大于400px，这样才能在同一行上。这个结果是两个DIV的右侧会空出100PX的空白

</div>

以上写法，也是在同一行。不同的是，一个靠左，一个靠右。

这里边的两个DIV的中间有100PX的空白。

<style>

.cheshi1{width:500px;height:100px;float:left;}

.cheshi2{width:600px;height:100px;float:left;}

</style>

<bodystyle="width:1000px;height:400px;">

<divclass="cheshi1">111111111</div>

<divclass="cheshi1">1111111</div>

<divclass="cheshi2">222222222</div>

<divclass="cheshi2">22222222</div>

</body>以上代码为例,cheshi1控制的div就可以并排显示， cheshi2的div不能并排显示，只能换行显示。

float:left;定义div的浮动，当这两个或者更多的div都是float:left;时，那么它们就会在父元素的框内顺序从左到右排列，而当它们的宽度和大于父元素的宽度时，那么多余出来的div会被挤换行。

cheshi2就是明显被挤换行的例子。

定义div的浮动有很多，大多用float:left;（向左）或者float:right;（向右）只要控制好div的浮动和父元素与子元素的宽度，就不会出现被迫换行的情况。

关于html的div怎么使用到此分享完毕，希望能帮助到您。