css 双栏布局 左侧宽度自适应 右侧自适应

如标题所述，为了实现左侧宽度自适应，右侧使用剩余空间。

第一种方案：使用table实现

<table className='wrap'>
   <tbody>
     <tr>
       <td className="left1">leftleft</td>
       <td className="right1">
         rightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightright
       </td>
     </tr>
     <tr>
       <td className="left1">leftleftleftleftleftleftleftleftleft</td>
       <td className="right1">
         rightrightrightrightrightright
       </td>
     </tr>
   </tbody>
 </table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

.wrap {
  display: table;
  padding: 5px;
  width: 400px;
}

.left {
  width: auto;
  text-align: right;
  vertical-align: top;
  white-space: nowrap;
}
.right {
  word-break: break-all;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

效果图：

第二种方案：与第一种类似，仿table实现

<div className='wrap'>
  <div className='content'>
    <div className='left'>leftleft</div>
    <div className='right'>rightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightright</div>
  </div>
  <div className='content'>
    <div className='left'>leftleftleftleftleftleftleftleftleft</div>
    <div className='right'>rightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightright</div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10

.wrap {
  display: table;
  padding: 5px;
  width: 400px;
}
.content {
  display: table-row;
  padding: 5px;
}
.left {
  width: auto;
  padding-right: 5px;
  display: table-cell;
  white-space: nowrap;
}
.right {
  display: table-cell;
  word-break: break-all;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

效果图：

如有更好的方案，欢迎分享~~~