左侧固定，右侧自适应的布局方式(新增评论区大佬教的方法） |
您所在的位置：网站首页 › arcgis右侧目录固定 › 左侧固定，右侧自适应的布局方式(新增评论区大佬教的方法） |
|
一.浮动布局
1.先让固定宽度的div浮动！使其脱离文档流。 2.margin-left的值等于固定div的宽度相等。 .aside{ float: left; width: 200px; background-color: red; } .content{ margin-left: 200px; background-color: blue; } Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore provident dolor in voluptatum tempore non, placeat obcaecati totam ut delectus libero excepturi distinctio asperiores odit nobis soluta, esse aspernatur beatae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore provident dolor in voluptatum tempore non, placeat obcaecati totam ut delectus libero excepturi distinctio asperiores odit nobis soluta, esse aspernatur beatae. 二.margin的负值(3个div) 是固定宽度的div脱离文档流。利用marin负值可以使得，后面的div可以与前面的div 保持同行显示。给包裹内容的div加margin-left 可以使得与左边的文字不重叠 .aside{ float: left; margin-right: -200px; width: 200px; background-color: red; } .content{ float: right; } .content .inner{ margin-left: 200px; background-color: blue; } Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore provident dolor in voluptatum tempore non, placeat obcaecati totam ut delectus libero excepturi distinctio asperiores odit nobis soluta, esse aspernatur beatae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore provident dolor in voluptatum tempore non, placeat obcaecati totam ut delectus libero excepturi distinctio asperiores odit nobis soluta, esse aspernatur beatae. 三.calc()计算属性注意：使用calc计算属性的时候 运算符(- +等等)两边必须有空格 注意两个div必须一左一右浮动。calc的宽度必须要减去的宽度要与固定宽度保持一致。 .aside{ float: left; width: 200px; background-color: red; } .content{ calc:(100% - 200px); background-color: blue; } Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore provident dolor in voluptatum tempore non, placeat obcaecati totam ut delectus libero excepturi distinctio asperiores odit nobis soluta, esse aspernatur beatae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore provident dolor in voluptatum tempore non, placeat obcaecati totam ut delectus libero excepturi distinctio asperiores odit nobis soluta, esse aspernatur beatae. 四.flex布局 需要给父级div设置display: flex属性。固定宽度的div设置flex: 0 0 200px即可。内容区域的div直接写出flex: 1即可。 .container{ display: flex; } .aside{ flex: 0 0 200px; background-color: red; } .content{ flex: 1; background-color: blue; } Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore provident dolor in voluptatum tempore non, placeat obcaecati totam ut delectus libero excepturi distinctio asperiores odit nobis soluta, esse aspernatur beatae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore provident dolor in voluptatum tempore non, placeat obcaecati totam ut delectus libero excepturi distinctio asperiores odit nobis soluta, esse aspernatur beatae. 五.左侧浮动，右侧overflow:hidden .aside{ width: 200px; float: left; background-color: red; } .content{ overflow: hidden; background-color: blue; } Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore provident dolor in voluptatum tempore non, placeat obcaecati totam ut delectus libero excepturi distinctio asperiores odit nobis soluta, esse aspernatur beatae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore provident dolor in voluptatum tempore non, placeat obcaecati totam ut delectus libero excepturi distinctio asperiores odit nobis soluta, esse aspernatur beatae. 阮一峰老师写的教程权威传送门：http://www.ruanyifeng.com/blo... |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |