1.浮动
.box{ width:100%; } .left{ width:200px; height:100px; background: red; float: left; } .right{ width: 200px; height:100px; background: yellow; float: right; } .main{ height: 100px; background: orange; }Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia quibusdam architecto id incidunt illo ex error itaque ullam expedita quos distinctio cupiditate quasi sapiente quae totam maiores deleniti placeat aut.
2.定位
body{ position: relative; } div:nth-of-type(1){ position: absolute; width: 200px; height: 100px; left: 0; background: red; } div:nth-of-type(2){ /\* position: absolute; left: 200px; right: 200px; \*/ background: rgba(200,10,10,.5); height: 100px; } div:nth-of-type(3){ position: absolute; right: 0; top: 0; width: 200px; height: 100px; background: orchid; }Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet at vero a porro maxime deleniti eveniet excepturi veritatis doloribus aut eius quibusdam similique itaque eaque in explicabo dolorum repellat asperiores.
3.弹性盒子
\*{ margin: 0; padding: 0; } ul{ width: 100%; height: 200px; display: flex; } ul li{ list-style: none; height: 100%; } ul li:nth-of-type(odd){ width:200px; background: red; flex-shrink:0; } ul li:nth-of-type(2){ width:100%; background: green; flex-shrink:1; }
