实现左边固定宽度右边自适应布局

xiaoxiao2021-02-28  132

       第一种

       #box{width: 100%;background: red;overflow:hidden;}        #lef{float:left;width: 300px;height: 300px;background: blue;}

       #rig{margin-left: 310px;background: pink;height: 500px;}

       第二种         #box{width: 100%;background: red;overflow:hidden;position: relative;}         #lef{position:absolute;top: 0;left: 0; width: 300px;height: 300px;background: blue;}         #rig{margin-left: 310px;background: pink;height: 500px;}

       第三种         #box{width: 100%;background: red;overflow:hidden;}        #lef{float:left;width: 300px;height: 300px;background: blue;}        #rig{overflow: hidden; background: pink;height: 500px;}

       第四种      calc()能让你给元素的做计算。        #box{width: 100%;background: red;overflow:hidden;}         #lef{width: 300px;float: left; height: 300px;background: blue;}          #rig{float: left;width: calc(100% - 300px);height:400px;background: pink;}

       

      使用div标签

      <div id="box">           <div id="lef"></div>           <div id="rig"></div>       </div>

      

转载请注明原文地址: https://www.6miu.com/read-40412.html

最新回复(0)