当前位置: 知识网 > 建站问题

网站div界面左右布局划分方法(div+css)

知识网2022年02月20日 00:12原创

div左右方法

html左右结构思空见贯结构构造,结构组织常常接纳div标签来构造,而支配组织均采取float浮动属性实现,div居左机关应用float:left;div居右机关使用float:right完成。

div+css左右布局成就图

div+css左右布局

绿色div居左靠左首要关头CSS配置float:left

蓝色div居右靠右主要枢纽css配置float:right

1、左右布局实例代码

如下divcss实例html代码可直接拷贝复制外地实例。

<!DOCTYPE html>

<html>

<head>

<meta http-equiv=&Content-Type& content=&text/html; charset=utf-8& />

<title>摆布组织div 实例 css5.com.cn</title>

<style>

#wai{ width:400px; border:2px solid #900; padding:10px; overflow:hidden}

.divleft{ float:left; width:100px; border:1px solid #060}

.divright{ float:right; width:280px; border:1px solid #00F}

</style>

</head>

<body>

<div id=&wai&>

<div class=&divleft&>此div完成左机关</div>

<div class=&divright&>此div实现右结构</div>

</div>

</body>

</html>

为了看到靠左靠右效果,以是对三个div均参预css边框花色。

2、实现截图

div+css左右布局图

div的支配机关实理论例

很赞哦!(8)

发表高见 (请对您的言行负责)
2022年02月20日 00:16,回答 by_淘气宝宝:
主要是思路,具体的css还是要自己修改一下,这样的css样式太丑了

©芃睿知识网 版权所有 2012-2022 www.shsongjiang.com

备案号:赣ICP备2022001527号-1