1. 一个 div 固定, 一个 div 自适应宽度两种情况, 固定在左或者在右
- html:
- <div class="box1">
- <div class="main">
内容自适应宽度
- </div>
- <div class="aside">
侧栏固定宽度
- </div>
- </div>
这两种情况的 HTML 排版顺序都是一样的
CSS:
右边固定宽度:
- .box1 {
- clear: both;
- overflow: hidden;
- padding - right: 110px;
- /* 重要属性, 这个值是侧栏的 right 值 */
- }.box1.main {
- width: 100 % ;
- height: 50px;
- line - height: 50px;
- background: deepskyblue;
- float: left;
- }.box1.aside {
- height: 50px;
- line - height: 50px;
- width: 100px;
- background: skyblue;
- float: left;
- margin - right: -100px;
- /* 重要属性, 这个值是侧栏的宽度 */
- position: relative;
- right: -10px;
- /* 重要属性, 这个值是自身离其它 div 的间隙, 即 10px*/
- }
左边固定宽度:
- .box2 {
- clear: both;
- overflow: hidden;
- padding - left: 110px;
- /* 重要属性, 这个值是侧栏的 left 值 */
- }.box2.aside {
- width: 100px;
- height: 50px;
- line - height: 50px;
- background: skyblue;
- float: left;
- margin - left: -100 % ;
- /* 重要属性, 设置 - 100% 就能和内容栏同一行并覆盖内容栏 */
- position: relative;
- left: -110px;
- /* 重要属性, 该值是自身宽度与间隙之和 */
- }.box2.main {
- height: 50px;
- line - height: 50px;
- width: 100 % ;
- background: deepskyblue;
- float: left;
- }
总结: 如果固定宽度 div 在左边, 那么它就设置 margin:-100%,left 值就设置比它宽度大的值, 比如上面的 left:-110, 这样就有 10px 的间隙, 然后装它们的盒子设置 padding-left, 这个的值和固定宽度 div 的 left 值相等内容栏除了浮动和宽度 100%, 其它的都不用设置固定宽度的 div 在右边的时候, 就把 left,margin-left,padding-left 改成 right,margin-right,padding-right 就可以了
2. 两个固定宽度, 一个自适应宽度
- HTML:
- <div class="box1">
- <div class="main">
内容自适应宽度
- </div>
- <div class="aside1">
侧栏 1 固定宽度
- </div>
- <div class="aside2">
侧栏 2 固定宽度
- </div>
- </div>
这三种情况的 HTML 排版顺序也是一样的
CSS:
两个固定宽度 div 都在右边:
- .box1 {
- clear: both;
- overflow: hidden;
- padding - right: 240px;
- /* 重要属性, 这个值是两个侧栏宽度加每个的间隙的值, 这里间隙每个是 10px, 所以 100+120+10+10=240*/
- }.box1.aside1 {
- width: 100px;
- height: 50px;
- line - height: 50px;
- background: skyblue;
- float: left;
- margin - right: -100px;
- /* 重要属性, 这个值是该 div 的宽度 */
- position: relative;
- right: -10px;
- /* 重要属性, 这个值是自身间隙即 10px*/
- }.box1.aside2 {
- width: 120px;
- height: 50px;
- line - height: 50px;
- background: skyblue;
- float: left;
- margin - right: -120px;
- /* 重要属性, 这个值是该 div 的宽度 */
- position: relative;
- right: -120px;
- /* 重要属性, 这个值是该 div 左边的 div 的宽度与间隙, 加上自身间隙的值, 即 100+10+10=120, 不要理解为自身的宽度哦 */
- }.box1.main {
- height: 50px;
- line - height: 50px;
- width: 100 % ;
- background: deepskyblue;
- float: left;
- }
两个固定宽度都在左边:
- .box2 {
- clear: both;
- overflow: hidden;
- padding - left: 240px;
- /* 重要属性, 这个值是两个 div 宽度与间隙之和 */
- }.box2.aside1 {
- width: 100px;
- height: 50px;
- line - height: 50px;
- background: skyblue;
- float: left;
- margin - left: -100 % ;
- /* 重要属性, 设置 - 100% 能让该 div 和内容块成一行并覆盖 */
- position: relative;
- left: -240px;
- /* 重要属性, 这个值是 padding-left 的值 */
- }.box2.aside2 {
- width: 120px;
- height: 50px;
- line - height: 50px;
- background: skyblue;
- float: left;
- margin - left: -100 % ;
- /* 重要属性, 设置 - 100% 能让该 div 和内容块成一行并覆盖 */
- position: relative;
- left: -130px;
- /* 重要属性, 这个值是 padding-left 减去最左边 div 宽度与间隙的值 */
- }.box2.main {
- height: 50px;
- line - height: 50px;
- width: 100 % ;
- background: deepskyblue;
- float: left;
- }
一个固定宽度在左, 一个固定宽度在右自适应宽度在中间
- .box3 {
- clear: both;
- overflow: hidden;
- padding: 0 130px 0 110px;
- /* 重要属性, 这个值是左右两边 div 的宽度 */
- }.box3.aside1 {
- width: 100px;
- height: 50px;
- line - height: 50px;
- background: skyblue;
- float: left;
- margin - left: -100 % ;
- /* 重要属性 */
- position: relative;
- left: -110px;
- /* 重要属性, 这个值是自身宽度加上间隙 */
- }.box3.aside2 {
- width: 120px;
- height: 50px;
- line - height: 50px;
- background: skyblue;
- float: left;
- margin - right: -120px;
- /* 重要属性, 这个值是自身宽度 */
- position: relative;
- right: -10px;
- /* 重要属性, 这个值是自身离其它 div 的间隙 */
- }.box3.main {
- height: 50px;
- line - height: 50px;
- width: 100 % ;
- background: deepskyblue;
- float: left;
- }
总结: 两个 div 固定宽度的情况, 还是只操作固定宽度的 div, 自适应宽度的不管它在左边的 div 就设置 margi-left:-100%,left 就是宽度与间隙的值; 右边的就设置 margin-right: 负自身宽度, 相对定位的 right 就是宽度与间隙的值
3. 多个固定宽度, 一个自适应宽度
- HTML:
- <div class="box1">
- <div class="main">
内容自适应宽度
- </div>
- <div class="aside1">
侧栏 1 固定宽度
- </div>
- <div class="aside2">
侧栏 2 固定宽度
- </div>
- <div class="aside3">
侧栏 3 固定宽度
- </div>
- </div>
三种情况的 HTML 排版顺序也一样
CSS:
三个固定宽度 div 在最右边, 自适应宽度 div 在左边
- .box1 {
- clear: both;
- overflow: hidden;
- padding - right: 390px;
- /* 重要属性, 该值是每个 div 宽度与间隙之和 */
- }.box1.aside1 {
- width: 100px;
- height: 50px;
- line - height: 50px;
- background: skyblue;
- float: left;
- margin - right: -100px;
- /* 重要属性, 该值是该 div 的宽度 */
- position: relative;
- right: -10px;
- /* 该值是自身离其它 div 的间隙 */
- }.box1.aside2 {
- width: 120px;
- height: 50px;
- line - height: 50px;
- background: skyblue;
- float: left;
- margin - right: -120px;
- /* 重要属性, 该值是该 div 的宽度 */
- position: relative;
- right: -120px;
- /* 该值是该 div 的左边 div 宽度与间隙, 加上自身间隙的值, 即 100+10+10=120*/
- }.box1.aside3 {
- width: 140px;
- height: 50px;
- line - height: 50px;
- background: skyblue;
- float: left;
- margin - right: -140px;
- /* 重要属性, 该值是该 div 的宽度 */
- position: relative;
- right: -250px;
- /* 该值是该 div 的左边 div 宽度与间隙, 加上自身间隙的值, 即 100+10+120+10+10=250*/
- }.box1.main {
- height: 50px;
- line - height: 50px;
- width: 100 % ;
- background: deepskyblue;
- float: left;
- }
两个固定宽度 div 在最左边, 另一个在最右边, 自适应宽度 div 在最中间
- .box2 {
- clear: both;
- overflow: hidden;
- padding: 0 150px 0 240px;
- /* 重要属性, 左边的 padding 是两个 div 的宽度与间隙之和, 右边的是一个 div 宽度与间隙之和 */
- }.box2.aside1 {
- width: 100px;
- height: 50px;
- line - height: 50px;
- background: skyblue;
- float: left;
- margin - left: -100 % ;
- /* 重要属性 */
- position: relative;
- left: -240px;
- /* 重要属性, 由于该 div 是在最左边的, 所以 left 值是 padding 的 left 的值 */
- }.box2.aside2 {
- width: 120px;
- height: 50px;
- line - height: 50px;
- background: skyblue;
- float: left;
- margin - left: -100 % ;
- /* 重要属性 */
- position: relative;
- left: -130px;
- /* 重要属性, 该值是 padding 的 left 的值减去最左边的 div 宽度与间隙的值 */
- }.box2.aside3 {
- width: 140px;
- height: 50px;
- line - height: 50px;
- background: skyblue;
- float: left;
- margin - right: -140px;
- /* 重要属性, 该值是该 div 宽度与间隙的值 */
- position: relative;
- right: -10px;
- /* 重要属性, 由于设置了 margin-right 之后, 该 div 到了最右边, 所以这里的 right 值是间隙值 */
- }.box2.main {
- height: 50px;
- line - height: 50px;
- width: 100 % ;
- background: deepskyblue;
- float: left;
- }
一个固定宽度 div 在左边, 另外两个在最右边, 自适应宽度在中间
- .box3 {
- clear: both;
- overflow: hidden;
- padding: 0 280px 0 110px;
- /* 重要属性, padding 的 right 值是右边两个 div 宽度与间隙的和; padding 的 left 值是左边的 div 宽度与间隙的和 */
- }.box3.aside1 {
- width: 100px;
- height: 50px;
- line - height: 50px;
- background: skyblue;
- float: left;
- margin - left: -100 % ;
- /* 重要属性 */
- position: relative;
- left: -110px;
- /* 重要属性, 该值是该 div 宽度与间隙的值 */
- }.box3.aside2 {
- width: 120px;
- height: 50px;
- line - height: 50px;
- background: skyblue;
- float: left;
- margin - right: -120px;
- /* 重要属性, 该值是该 div 宽度 */
- position: relative;
- right: -10px;
- /* 重要属性, 由于设置了 margin-right, 所以该值是间隙值 */
- }.box3.aside3 {
- width: 140px;
- height: 50px;
- line - height: 50px;
- background: skyblue;
- float: left;
- margin - right: -140px;
- /* 重要属性, 该值是该 div 宽度 */
- position: relative;
- right: -140px;
- /* 重要属性, 该值是它紧邻的左边的 div 的宽度与间隙还有自身与 div 间隙的和, 即 120+10+10=140*/
- }.box3.main {
- height: 50px;
- line - height: 50px;
- width: 100 % ;
- background: deepskyblue;
- float: left;
- }
总结: 多个 div 固定宽度, 一个自适应的布局方式和两个固定宽度, 一个自适应的布局方式也是同样的原理, 只操作固定的 div, 自适应的不管, 然后设置装它们的盒子的 padding 值固定宽度 div 设置相对定位的 left 或者 right 值, 设置 margin-left 或者 margin-right 的值
圣杯布局最终总结:
1.HTML 排版都是自适应 div 在最前面, 然后是固定宽度 div
2. 都设置 float:left
3. 如果 div 在左边, 则该 div 设置 margin-left:-100% 如果 div 在右边, 则该 div 设置 margin-right: 负自身宽度
4. 在左边的 div 设置相对定位的 left 值, 该值是自身的间隙如果左边是多个 div, 那么当前 div 的 left 值就是它右边所有的 div 的宽度与间隙的和再加上自身的间隙的值
5. 在右边的 div 设置相对定位的 right 值, 该值是自身的间隙如果右边是多个 div, 那么当前 div 的 right 值就是它左边所有的 div 的宽度与间隙的和再加上自身的间隙的值
6. 这些 div 的外层的大盒子设置 padding 值, 这个值是左边或者右边 div 的宽度与间隙的和例如左边一个固定宽度的 div, 宽度为 50, 间隙是 15; 然后右边两个固定宽度的 div, 宽度分别是 80100, 间隙都是 10. 那么 padding 值就应该设置为 padding:0 200px 0 65px;
7. 自适应 div 的宽度设置为 100%, 其它的都不用管
来源: https://www.cnblogs.com/zjjDaily/p/8492400.html