电脑现已成为我们工作、生活和娱乐必不可少的工具了，在使用电脑的过程中，可能会遇到如何使用CSS相关的属性控制div标签分块显示的问题，如果我们遇到了如何使用CSS相关的属性控制div标签分块显示的情况，该怎么处理怎么才能解决如何使用CSS相关的属性控制div标签分块显示带来的困扰呢，对于这样的问题其实我们只需要HTML5CSS3JavaScriptHBuilderX浏览器截图工具第一步，为了使用css设置页面显示，新建一个静态页面，默认显示的是HTML5格式，如下图所示：第二步，在body标签中，插入多个div标签，分别设置成左中右，设置不同的class，如下图所示：第三步，先使用外层的div类选择器，设置内边距和高度，注意元素选择器的层次，如下图所示：第四步，再使用左中右类选择器，控制位置属性和浮动属这样就解决了这样的问题，接下来给大家带来如何使用CSS相关的属性控制div标签分块显示的详细操作步骤。

工具/原料

HTML5
CSS3
JavaScript
HBuilderX
浏览器
截图工具

方法/步骤

第一步，为了使用css设置页面显示，新建一个静态页面，默认显示的是HTML5格式，如下图所示：

第二步，在body标签中，插入多个div标签，分别设置成左中右，设置不同的class，如下图所示：

第三步，先使用外层的div类选择器，设置内边距和高度，注意元素选择器的层次，如下图所示：

第四步，再使用左中右类选择器，控制位置属性和浮动属性；然后使用类选择器控制宽度，如下图所示：

第五步，再分别使用left和right类选择器，设置左边和右边的背景颜色、左外边距和left属性，如下图所示：

第六步，保存代码并在浏览器查看界面显示效果，可以发现左边和中间有个空白部分，如下图所示：

注意事项

注意使用CSS3中的样式控制div显示左中右布局
注意CSS3中的相对定位和浮动属性的用法

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。