이 글의 내용은 플렉서블 박스의 중간 적응을 설정하는 방법(코드 튜토리얼)입니다. 필요한 친구들이 참고할 수 있기를 바랍니다.
nbsp;html> <meta> <title>弹性盒子中间自适应</title> <style> /* 父级添加 display:-webkit-box; display:-moz-box; 子级添加 box-flex:1; -webkit-box-flex:1; -moz-box-flex:1; 定义子容器占的比例, 具体计算规则,父容器-定宽,剩余的按比例等分。 但实际计算中并没有实现等分(子容器中还有元素时),常用的解决方法是, 数字 1 为所占的份数 添加宽度百分比和box-sizing: border-box;(解决border和padding问题) */ #wrap{ width:100%; margin:0 auto; background: #ccc; display:-webkit-box; display:-moz-box; } #left{ width:100px; padding:10px; background:#09F; } #content{ /*width:400px;*/ padding:10px; background:#30C; box-flex:1; -webkit-box-flex:1; -moz-box-flex:1; } #right{ /*width:100px;*/ padding:10px; background:#F0F; box-flex:1; -webkit-box-flex:1; -moz-box-flex:1; } #left,#content,#right{ box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; } </style> <p> </p><p>#f00</p> <p>#0f0</p> <p>#00F</p>
위는 유연한 상자의 중간 적응을 설정하는 방법(코드 튜토리얼)에 대한 전체 소개입니다. CSS 비디오 튜토리얼에 대해 더 알고 싶다면 PHP에 주목하세요. 중국사이트.
위 내용은 유연한 상자의 중간 적응을 설정하는 방법(코드 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!