实现一个两栏布局,左侧占30%宽度,右侧占70%宽度
HTML代码:
<selection>
<article class="left">
<p>132</p>
</article>
<article class="right">
<p>456</p>
</article>
</selection>
CSS代码:
.left{
/* float: left; */
/* position: absolute;
top:0;
left: 0;
margin: 0; */
width: 30%;
background-color: aqua;
height: 200px;
}
.right{
/* float: right; */
/* position: absolute;
top: 0;
left: 30%; */
width: 70%;
background-color: blueviolet;
height: 200px;
}
selection{
display: flex;
}
实现一个两栏布局,左侧固定宽度,右侧根据浏览器宽度进行自适应变化
.left {
width: 300px;
height: 100%;
background-color: lightcoral;
/* float: left; */
/* position: absolute; */
}
.right {
height: 100%;
/* position: relative;
top: 0;
left: 300px; */
flex:1;
background-color: khaki;
}
selection{
display: flex;
}
实现一个两栏布局,右侧固定宽度,左侧根据浏览器宽度进行自适应变化
要在HTML中将right写在前面
<body>
<selection>
<article class="right">
<p>456</p>
</article>
<article class="left">
<p>132</p>
</article>
</selection>
</body>
CSS装饰为:
.left {
height: 100%;
/* margin-right: 450px; */
/* overflow: hidden; */
flex: 1;
background-color: lightcoral;
}
.right {
/* float: right; */
/* position: absolute;
top: 0;
right: 0; */
width: 450px;
height: 100%;
background-color: khaki;
}
selection{
display: flex;
}
实现一个三栏布局,左侧固定宽度,右侧固定宽度,中间部分宽度随浏览器宽度变化而自适应变化
假如某个div元素A是浮动的,如果A元素上一个元素也是浮动的,那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素,那么A元素会被挤到下一行);如果A元素上一个元素是标准流中的元素,那么A的相对垂直位置不会改变,也就是说A的顶部总是和上一个元素的底部对齐。
div的顺序是HTML代码中div的顺序决定的。
犯过几次这个错误,终于找到了一个好的博文,记录一下。
<body>
<selection>
<article class="left">
<p>132</p>
</article>
<article class="right">
<p>456</p>
</article>
<article class="center">
<p>888</p>
</article>
</selection>
</body>
注意在写flex方法时要将center和right换位置
.left {
width: 200px;
height: 100%;
/* float: left; */
/* position: absolute;
top: 0;
left: 0; */
background-color: lightcoral;
}
.center{
/* margin-left: 200px;
margin-right: 200px; */
height: 100%;
background-color: cadetblue;
flex: 1;
}
.right {
width: 200px;
height: 100%;
/* float: right; */
/* position: absolute;
top: 0;
right: 0; */
background-color: khaki;
}
selection{
display: flex;
}
实现一个三栏布局,左侧固定宽度,中间固定宽度,右侧根据浏览器宽度变化而自适应变化
直接放CSS代码,HTML代码和前面的几乎一样
.left {
width: 200px;
height: 100%;
/* float: left; */
/* position: absolute;
top: 0;
left: 0; */
background-color: lightcoral;
}
.center{
height: 100%;
background-color: cadetblue;
width: 200px;
/* float: left; */
/* position: absolute;
top: 0;
left: 200px; */
}
.right {
/* margin-left: 400px; */
height: 100%;
background-color: khaki;
flex: 1;
}
selection{
display: flex;
}