HTML中怎么实现div左右布局
生活随笔
收集整理的這篇文章主要介紹了
HTML中怎么实现div左右布局
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
這篇文章主要介紹“HTML中怎么實現div左右布局”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“HTML中怎么實現div左右布局”文章能幫助大家解決問題。
div擺布組織賞析和組織方法
html左右結構思空見貫結構構造，結構組織常常接納div標簽來構造，而支配組織均采取float浮動屬性實現，div居左機關應用float:left；div居右機關使用float:right完成。
div支配組織成就圖
綠色div居左靠左首要關頭CSS配置float:left
藍色div居右靠右主要樞紐css配置float:right
1、擺布布局實例代碼
如下div css實例html代碼可直接拷貝復制外地實例。
<!DOCTYPEhtml>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>擺布組織div實例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完成左機關</div>
<divclass="divright">此div實現右結構</div>
</div>
</body>
</html>
為了看到靠左靠右效果，以是對三個div均參預css邊框花色。
2、實現截圖
總結
以上是生活随笔為你收集整理的HTML中怎么实现div左右布局的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ASP.NET Google Maps
- 下一篇： 一张纸折多少次可以变成珠穆朗玛峰那么高?