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

 <style>
     .fitting-Modal-details{
         overflow: hidden;
     }
     .detailsContent{
         float: left;
         min-width: 50%;
         line-height: 30px;
     }
 </style>

 <template>
     <div class="fitting-Modal-details">
          <div class="detailsContent">
               <span>规划ID：</span>
               <span>aaaaaaaaaaaaaaa</span>
          </div>
          <div class="detailsContent">
               <span>用户ID：</span>
               <span>bbbb</span>
          </div>
          <div class="detailsContent">
               <span>主体：</span>
               <span>ccccccccc</span>
          </div>
          <div class="detailsContent">
               <span>用户拟合目标：</span>
               <span>ddddddddddddddddddddddddd</span>
          </div>
          <div class="detailsContent">
               <span>创建时间：</span>
               <span>eeeeeeeeeeeee</span>
          </div>
          <div class="detailsContent">
               <span>产品类型：</span>
               <span>fffffffffffffffffffffff</span>
          </div>
          <div class="detailsContent">
               <span>产品类型拟合目标：</span>
               <span>g</span>
          </div>
          <div class="detailsContent">
               <span>机房：</span>
               <span>h</span>
          </div>
          <div class="detailsContent">
               <span>机房拟合目标：</span>
               <span>iiiiiiiiiiii</span>
          </div>
          <div class="detailsContent">
               <span>状态：</span>
               <span>jjjjjjjjj</span>
          </div>
          <div class="detailsContent">
               <span>备注：</span>
               <span>kkkkkk</span>
          </div>
      </div>
 </template>

效果：

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