Home >Web Front-end >CSS Tutorial >How to implement two-column and three-column layout in css2
How to implement two-column and three-column layout in css2
- 一个新手Original
- 2017-10-18 09:43:101618browse
Preface
I believe everyone knows about flex elastic layout. It is a property in css3, but it has certain compatibility issues. During the interview a few days ago, the author met the interviewer who needed to design a two-column layout. Of course I said the parent element should be flex, but I needed to use basic CSS2 attribute layout, which was silly. . .
Requirements: two-column layout, fixed width on the left and adaptive on the right
html The layout is as follows
<p id="father">
<p id="left">我是定宽左</p>
<p id="right">我是自适应右</p>
</p> 1. flex layout
##
#father{
display: flex;
}
#left{
background: red;
height: 200px;
width: 200px;
}
#right{
background: green;
height: 200px;
flex:1;
}2. css2 normal layout
<style>
#left{
background: red;
height: 200px;
width: 200px;
float:left;
}
#right{
background: green;
height: 200px;
margin-left:200px;
}
</style> Note:
When laying out multiple columns, you need to write the html code of the floating element in front of the adaptive element. For example, the following is the code for the three-column layout:<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
#p1{
width: 200px;
height: 200px;
background: red;
float:left;
}
#p2{
margin-left: 200px;
margin-right: 200px;
height: 200px;
background: green;
}
#p3{
width: 200px;
height: 200px;
background: red;
float:right;
}
</style>
</head>
<body>
<p id="box">
<p id="p1">我是左定宽</p>
<p id="p3">我是中间自适应</p>
<p id="p2">我是右定宽</p>
</p>
</body>
</html>The effect is as shown:
The above is the detailed content of How to implement two-column and three-column layout in css2. For more information, please follow other related articles on the PHP Chinese website!