网站和网站的app,太原做网站找谁,阳江招聘网兼职,网站开发的理解目录 CSS两栏布局#xff08;左列定宽#xff0c;右列自适应宽#xff09;
方法一#xff1a;浮动margin
方法二#xff1a;定位margin
方法三#xff1a;浮动BFC
方法四#xff1a;Flex布局
方法五#xff1a;able布局
CSS两栏布局#xff08;左列不定宽#…目录 CSS两栏布局左列定宽右列自适应宽
方法一浮动margin
方法二定位margin
方法三浮动BFC
方法四Flex布局
方法五able布局
CSS两栏布局左列不定宽右列自适应宽 CSS两栏布局左列定宽右列自适应宽 方法一浮动margin
div classcontainerdiv classleft定宽/divdiv classright自适应/div
/divstyle/* 不给高度不行不给宽度可以自适应 */
.container {height: 300px;
}
.left {float: left;/* 定宽 */width: 200px;height: 100%;background-color:chartreuse;
}.right {/* 不设置宽度自适应 */height: 100%;background-color:coral;margin-left: 200px;
}/style
方法二定位margin
html不变
/* 不给高度不行不给宽度可以自适应 */
.container {position: relative;height: 300px;
}
.left {position: absolute;left: 0;/* 定宽 */width: 200px;height: 100%;background-color:chartreuse;
}.right {/* 不设置宽度自适应 */height: 100%;/* 方法一margin-left: 200px(只设置边距也可以实现) *//* 方法二定位*/position:absolute;left: 200px;right: 0; /*不设置这个宽度会缩在一起不自适应展开*/background-color:coral;
}方法三浮动BFC
.container {height: 300px;
}
.left {float: left;/* 定宽 */width: 200px;height: 100%;background-color: chartreuse;
}
.right {/* 不设置宽度自适应 */height: 100%;overflow: hidden; /*触发BFC条件*/background-color: coral;
}原理给正常元素添加BFC属性正常元素就不会被遮挡且环绕浮动元素排开。 以上脱离文档流的方式(如浮动、定位)他们的大体思路都是: 先让左定宽元素脱离文档流这样可以右列正常能够与左列脱离文档流的元素“站成一排”此时左列元素还覆盖着右列元素最后我们只需要调整一下右列元素的外边距啊、定位啊什么的就可以完成 方法四Flex布局 .container {display: flex;height: 300px;
}
.left {/* 定宽 */width: 200px;/*height: 100% 因为未脱离文档流所以不用设置高度也行*/background-color: chartreuse;
}
.right {/* flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。 */flex: 1;/*height: 100% 因为未脱离文档流所以不用设置高度也行*/background-color:coral;
}方法五able布局 /* table布局(display:table-cell后)子级容器默认是自动平分宽度沾满父级容器 */
.container {display: table;height: 300px;width: 100%;
}
.left {display: table-cell;/* 定宽 */width: 200px;/*height: 100% 因为未脱离文档流所以不用设置高度也行*/background-color: chartreuse;
}
.right {/*height: 100% 因为未脱离文档流所以不用设置高度也行*/display: table-cell;background-color: coral;
}table布局只需要给父元素添加displaytable属性以及给两个子元素添加 display: table-cell属性即可 CSS两栏布局左列不定宽右列自适应宽
方法一flex方法二浮动BFC 因为操作方式如上面演示一样只是去掉左列宽度属性而已因此就不一一赘述列举了。 操作方式去掉左列宽度左列的宽度根据内容进行自适应从而实现“左列不定宽右列自适应宽”的效果。 为什么只有这两种方式可以实现
因为其他方式都是脱离文档流的方式(如浮动、定位)内部元素无法撑开脱离文档流的盒子。
