如何使用div优雅的布局
生活随笔
收集整理的這篇文章主要介紹了
如何使用div优雅的布局
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
flex布局
- 方式1，float飄起來~
- 方式2，使用flex，將多個div合并到一行
就是跨行和跨列嘛…
如果表格做就easy…
但是, div是塊級標簽，每個div會獨占一行…
方式1，float飄起來~
下面的兩個div會到一行…
<div> <div style="float:left;">div1</div><div style="float:left;">div2</div> </div>但是這個有局限性的… 要調寬高度…
雖然使用flot:left 向某個方向飄簡單許多，如果一行飄了多個div，每個的div的寬高都需要考慮如何布局才能整齊。
方式2，使用flex，將多個div合并到一行
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>div flex demo</title><style>/*使用flex樣式，將多個div合并為一行~*/.mainDiv {display: flex;background-color: aquamarine;}div {border: 0.1px solid black;}</style></head><body><div class="mainDiv" style="width: 100%;"><!--left--><div style="width:75%;"><div class="mainDiv" style="height: 100px;"><div style="width: 33.3%;">div1</div><div style="width: 33.3%;">div2</div><div style="width: 33.3%;">div3</div></div><div class="mainDiv" style="height: 100px;"><div style="width: 50%;">div4</div><div style="width: 50%;">div5</div></div></div><!--right--><div style="width:25%;height: 200px;">div6</div></div> <hr /></body> </html>總結
以上是生活随笔為你收集整理的如何使用div优雅的布局的全部內容，希望文章能夠幫你解決所遇到的問題。
