Vue+min-width实现最大两栏布局

 1 <style>
 2     .fitting-Modal-details{
 3         overflow: hidden;
 4     }
 5     .detailsContent{
 6         float: left;
 7         min-width: 50%;
 8         line-height: 30px;
 9     }
10 </style>
11 
12 <template>
13     <div class="fitting-Modal-details">
14          <div class="detailsContent">
15               <span>规划ID:</span>
16               <span>aaaaaaaaaaaaaaa</span>
17          </div>
18          <div class="detailsContent">
19               <span>用户ID:</span>
20               <span>bbbb</span>
21          </div>
22          <div class="detailsContent">
23               <span>主体:</span>
24               <span>ccccccccc</span>
25          </div>
26          <div class="detailsContent">
27               <span>用户拟合目标:</span>
28               <span>ddddddddddddddddddddddddd</span>
29          </div>
30          <div class="detailsContent">
31               <span>创建时间:</span>
32               <span>eeeeeeeeeeeee</span>
33          </div>
34          <div class="detailsContent">
35               <span>产品类型:</span>
36               <span>fffffffffffffffffffffff</span>
37          </div>
38          <div class="detailsContent">
39               <span>产品类型拟合目标:</span>
40               <span>g</span>
41          </div>
42          <div class="detailsContent">
43               <span>机房:</span>
44               <span>h</span>
45          </div>
46          <div class="detailsContent">
47               <span>机房拟合目标:</span>
48               <span>iiiiiiiiiiii</span>
49          </div>
50          <div class="detailsContent">
51               <span>状态:</span>
52               <span>jjjjjjjjj</span>
53          </div>
54          <div class="detailsContent">
55               <span>备注:</span>
56               <span>kkkkkk</span>
57          </div>
58      </div>
59 </template>

效果:
  
  注:设置每个div最小宽度为50%,这样当相邻div内容长度不超过50%时为两个占一行,当div内容长度超过50%时,因为设置了最小宽度为50%,它会继续向后撑,所以单独占一行。

 

转载于:https://www.cnblogs.com/kunmomo/p/9890497.html

Vue.js结合Element UI库创建横向滚动表格(el-table),你可以使用Element UI提供的`el-table-column`组件以及自适应列宽的属性`show-overflow-tooltip`和`min-width`来解决错位问题,并通过设置`width`属性为百分比配合`auto-fit`模式来实现自动布局。 首先,在模板,你可以这样配置el-table: ```html <template> <div class="table-container"> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="name" label="Name" width="20%" show-overflow-tooltip min-width="80px" ></el-table-column> <!-- 添加其他列 --> <el-table-column prop="otherColumn" label="Other Column" width="20%" <!-- 可调整列宽 --> :show-overflow-tooltip="true" min-width="80px" ></el-table-column> <!-- ... --> <el-table-column type="expand" label="Expand"></el-table-column> </el-table> </div> </template> <script> export default { data() { return { tableData: [ { name: 'Item 1', otherColumn: 'Data for Item 1' }, // 更多数据... ] }; } }; </script> <style scoped> .table-container { overflow-x: auto; /* 设置水平滚动 */ } </style> ``` 这里,`width`属性设置了列的初始宽度,`min-width`保证了最小显示宽度,而`show-overflow-tooltip`可以让超出内容有提示。同时,给包含表格的容器添加`overflow-x: auto`可以使其在内容过多时显示水平滚动条。 如果需要自动调整列宽,你可以将`width`属性设为百分比(如上例的`20%`),然后启用`el-table`的`auto-fit`属性: ```html <el-table :data="tableData" :auto-fit="true" style="width: 100%"> ``` 这会使得列宽按照内容填充表格空间。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值