HTML中怎么实现div左右布局
生活随笔
收集整理的這篇文章主要介紹了
HTML中怎么实现div左右布局
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
這篇文章主要介紹“HTML中怎么實(shí)現(xiàn)div左右布局”的相關(guān)知識，小編通過實(shí)際案例向大家展示操作過程，操作方法簡單快捷，實(shí)用性強(qiáng)，希望這篇“HTML中怎么實(shí)現(xiàn)div左右布局”文章能幫助大家解決問題。
div擺布組織賞析和組織方法
html左右結(jié)構(gòu)思空見貫結(jié)構(gòu)構(gòu)造，結(jié)構(gòu)組織常常接納div標(biāo)簽來構(gòu)造，而支配組織均采取float浮動屬性實(shí)現(xiàn)，div居左機(jī)關(guān)應(yīng)用float:left；div居右機(jī)關(guān)使用float:right完成。
div支配組織成就圖
綠色div居左靠左首要關(guān)頭CSS配置float:left
藍(lán)色div居右靠右主要樞紐css配置float:right
1、擺布布局實(shí)例代碼
如下div css實(shí)例html代碼可直接拷貝復(fù)制外地實(shí)例。
<!DOCTYPEhtml>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>擺布組織div實(shí)例css5.com.cn</title>
<style>
#wai{width:400px;border:2pxsolid#900;padding:10px;overflow:hidden}
.divleft{float:left;width:100px;border:1pxsolid#060}
.divright{float:right;width:280px;border:1pxsolid#00F}
</style>
</head>
<body>
<divid="wai">
<divclass="divleft">此div完成左機(jī)關(guān)</div>
<divclass="divright">此div實(shí)現(xiàn)右結(jié)構(gòu)</div>
</div>
</body>
</html>
為了看到靠左靠右效果，以是對三個(gè)div均參預(yù)css邊框花色。
2、實(shí)現(xiàn)截圖
總結(jié)
以上是生活随笔為你收集整理的HTML中怎么实现div左右布局的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ASP.NET Google Maps
- 下一篇： 数据库连接失败的原因有哪些