西安保障性住房建设投资中心网站,微博wap版登录入口,无需域名网站建设,网站的详情页面flex布局方式1#xff0c;float飘起来~方式2#xff0c;使用flex#xff0c;将多个div合并到一行就是跨行和跨列嘛…如果表格做就easy…但是, div是块级标签#xff0c;每个div会独占一行…方式1#xff0c;float飘起来~
下面的两个div会到一行…
div div s…
flex布局方式1float飘起来~方式2使用flex将多个div合并到一行就是跨行和跨列嘛…如果表格做就easy…但是, div是块级标签每个div会独占一行…方式1float飘起来~
下面的两个div会到一行…
div div stylefloat:left;div1/divdiv stylefloat:left;div2/div
/div但是这个有局限性的… 要调宽高度… 虽然使用flot:left 向某个方向飘简单许多如果一行飘了多个div每个的div的宽高都需要考虑如何布局才能整齐。
方式2使用flex将多个div合并到一行
!DOCTYPE html
htmlheadmeta charsetUTF-8titlediv flex demo/titlestyle/*使用flex样式将多个div合并为一行~*/.mainDiv {display: flex;background-color: aquamarine;}div {border: 0.1px solid black;}/style/headbodydiv classmainDiv stylewidth: 100%;!--left--div stylewidth:75%;div classmainDiv styleheight: 100px;div stylewidth: 33.3%;div1/divdiv stylewidth: 33.3%;div2/divdiv stylewidth: 33.3%;div3/div/divdiv classmainDiv styleheight: 100px;div stylewidth: 50%;div4/divdiv stylewidth: 50%;div5/div/div/div!--right--div stylewidth:25%;height: 200px;div6/div/div hr //body
/html
