如何使用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>