css实现两列布局，一列固定宽度，一列宽度自适应方法_css表格宽度怎么自动适应

作者：从前慢现在也慢 | 2024-07-12 02:15:12

踩

css表格宽度怎么自动适应

css实现两列布局，一列固定宽度，一列宽度自适应方法

固定宽度区浮动，自适应区不设宽度而设置 margin

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 固定宽度区浮动，自适应区不设宽度而设置 margin</title>
</head>
<style>
.sidebar {
  float: right;
  width: 200px;
  height:300px;
  background-color:cornflowerblue;
  color:#fff;
}
.content {
  margin-right: 200px;
  height:300px;
  background-color:coral;
  color:#fff;
}
</style>
<body>
   <div class="wrap">
     <div class="sidebar" >固定宽度区</div>
     <div class="content" >自适应区</div>
   </div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

float与margin配合使用

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> float与margin配合使用</title>
</head>
<style>
.content {
   margin-left: -200px;
   float: left; 
   width: 100%;
   height:300px;
   background-color:coral;
   color:#fff;
}
.content div{
  margin-left:200px;
}
.sidebar {
  float: right; 
  width: 200px;
  height:300px;
  background-color: cornflowerblue;
  color:#fff;
}
</style>
<body>
   <div class="wrap">
     <div class="content" >
       <div>
          自适应区
       </div>
     </div>
     <div class="sidebar" >固定宽度区</div>
   </div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

固定宽度区使用绝对定位，自适应区设置margin

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 固定宽度区使用绝对定位，自适应区设置margin</title>
</head>
<style>
.wrap{
  position:relative;
}
.content {
  margin-right:200px;
  height:300px;
  background-color:coral;
  color:#fff;
  
}
.sidebar {
  position:absolute;
  width:200px;
  right:0;
  top:0;
  height:300px;
  background-color:cornflowerblue;
  color:#fff;
}
</style>
<body>
   <div class="wrap">
     <div class="content" >自适应区</div>
     <div class="sidebar">固定宽度区</div>
   </div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

使用display:table实现

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 使用display:table实现</title>
</head>
<style>
.wrap{
  display:table;
  width:100%;
}
.content {
  display:table-cell;
  height:300px;
  background-color:coral;
  color:#fff;
}
.sidebar {
    width:200px;
    display:table-cell;
    height:300px;
    background-color:cornflowerblue;
    color:#fff;
}
</style>
<body>
   <div class="wrap">
     <div class="content">自适应区</div>
     <div class="sidebar">固定宽度区</div>
   </div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/812357