css样式实现图片和两个文字分别在两端

Question

这种的样式该怎么实现，用了几个display: flex;justify-content: space-between;但是不行

现在是这样的

<div class="top_home_ybtx" id="top_home">
        <div class="top_home_ybtx_br">您已选择家庭单投保，共<span>X个</span>被保险人，系统将使用家庭保单计算保费。<br>        
            1.请逐一填写下方链接，待所有链接填写完成后，再统一提交投保，系统将逐笔扣款，生成X个投保单。<br>
            2.第一个链接填写完成后，才能填写后续链接，且投保人信息自动同步，若需修改投保人信息，需返回第一个链接修改。</div>
        <ul class="top_home_ybtx_tip">
            <li class="top_home_ybtx_tips">
                <img src="" alt="">
                <div class="top_home_ybtx_div">
                    <p class="top_home_ybtx_divp">
                        <span>医院通（瑞臻版）</span>
                        <span>已完成</span>
                    </p>
                    <p class="top_home_ybtx_divps">
                        <span>被保险人：<i>张山一</i></span>
                        <span>保费：<i>1111</i>元</span>
                    </p>
                </div>
            </li>
            <li class="top_home_ybtx_tips">
                <img />
                <div class="top_home_ybtx_div">
                    <p class="top_home_ybtx_divp">
                        <span>小林通（瑞臻这种版）</span>
                        <span>已完成</span>
                    </p>
                    <p class="top_home_ybtx_divps">
                        <span>被保险人：<i>苟富贵</i></span>
                        <span>保费：<i>11111</i>元</span>
                    </p>
                </div>
            </li>
            <li class="top_home_ybtx_tips">
                <img />
                <div class="top_home_ybtx_div">
                    <p class="top_home_ybtx_divp">
                        <span>医医同通（xx版）</span>
                        <span>已完成</span>
                    </p>
                    <p class="top_home_ybtx_divps">
                        <span>被保险人：<i>张方山</i></span>
                        <span>保费：<i>11111111</i>元</span>
                    </p>
                </div>
            </li>
        </ul>
    </div>

.top_home_ybtx{
    background-color: #F8F8F8;
    font-size: 0.5rem;
    /* font-weight: 600; */
    line-height: 0.8rem;
}
.top_home_ybtx_br{
    padding: 0 0.5rem;
}
.top_home_ybtx_tip{
    display: flex;
    flex-direction: column;
    margin-top: 0.4rem;
}
.top_home_ybtx_tips{
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.4rem;
    background-color: rgb(251, 132, 132);
    padding: 0.3rem 0.5rem;
}
.top_home_ybtx_tips img{
    width: 3.6rem;
    height: 3.58rem;
}
.top_home_ybtx_div{
    
}
.top_home_ybtx_divp{
    font-size: 0.68rem;
    display: flex;
}
.top_home_ybtx_divp span{
    /* margin-right: 2rem; */
}

Answer 1

【相关推荐】

• 你看下这篇博客吧, 应该有用👉 ：解决display:flex属性 justify-content: space-between和space-around换行后的排版问题
• 除此之外, 这篇博客: flex弹性盒子 justify-content: space-between； 最后一排不满的处理中的 方案2：补位添加节点法，这种方案适用于多种排列方式。 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  
  • 原图
    
  • 实现效果
    
  • html

  <div class="tem-flex">
    <div class="tem-list" v-for="item in len">列表</div>
    <div class="list" v-for="item in (row-len%row)" v-if="len%row > 0"></div>
  </div>
  

  • js

  data(){
  	return {
  		len : 14,
  		row: 4
  	}
  }
  

  • css

  .tem-flex{
    display: flex;
    flex-wrap: wrap;
    justify-content:space-between;
    justify-items: center;
    text-align: justify;
  }
  .list{
    content: '';
    width: 20%;
    border:1px solid transparent;
    padding: 5px;
    overflow: hidden;
  }
  .tem-list{
    width:20%;
    border:1px solid #ff6600;
    margin-bottom: 10px;
    padding: 10px 5px;
    display: flex;
    justify-content: center;
  }
  

  这里的 row 即是每列元素的个数，4列，5列。。。更改这个值即可

  ---

  微信群大佬都在等着你

  微信扫描二维码加入微信群，交流学习，及时获取代码最新动态。

  

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^