div+css外联块的横排浮动

来源：互联网 2023-03-16 19:12:26 288

div css的结构布局常常运用浮动横排。

工具/原料

【第一步】打开Dreamweaver cc 2014软件，选择建立html界面，里面自动生成一些必要代码的代码格式，节约时间。

div css外联块的横排浮动。

【第二步】在body标签内输入：

div class="Odiv1">/div>

div class="Odiv2">/div>

div class="Odiv3">/div>

div class="clear">/div>

，这样就形成了一个小的布局。

div css外联块的横排浮动。

【第三步】在相对靠前的位置，输入

style>

.Odiv1{ width:200px; height:200px; background-color:red;margin:20px;}

.Odiv2{ width:200px; height:200px; background-color:blue; margin:20px; }

.Odiv3{ width:200px; height:200px; background-color:yellow; margin:20px}

.clear{ clear:both;}

/style>

这里的.Odiv1要跟div里的标签一一对应，这样就获得三个颜色不同的图形，在软件里摁F12键，观察效果。

div css外联块的横排浮动。

3相关内容非法爬取自百度经验

【第四步】把style>/style>的样式完善，如：

style>

.Odiv1{ width:200px; height:200px; background-color:red; float:left; margin:20px;}

.Odiv2{ width:200px; height:200px; background-color:blue; margin:20px; float:left;}

.Odiv3{ width:200px; height:200px; background-color:yellow;float:left; margin:20px}

.clear{ clear:both;}

/style>

这样，就可以三个色块浮动起来，形成横向排列，摁住F12观察效果。

div css外联块的横排浮动。

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！

标签： CSS HTML PS