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

news2024/11/24 4:34:05

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

第一种方案：使用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>

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

.left {
  width: auto;
  text-align: right;
  vertical-align: top;
  white-space: nowrap;
}
.right {
  word-break: break-all;
}

效果图：
使用table实现的效果

第二种方案：与第一种类似，仿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>

.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;
}