一行内多个元素水平均等排布

先上效果图！

 

 下面上代码，是用vue写的，页面代码:

<div class="info">
            <ul>
              <li>
                <!-- 左图片，中信息，右图标 -->
                <div class="img">
                  <img :src="url" alt="" style="width:90px;height:90px" />
                </div>
                <div class="massage">
                  <p style="font-size:15px;font-weight:550">
                    优狗天津科技发展有限公司
                  </p>
                  <br />
                  <p style="font-size:12px;">zhongxiaoyi@162.com</p>
                  <br />
                  <p style="font-size:10px;color:f2f2f2">
                    联系方式：13512698562
                  </p>
                </div>
                <div class="collect">
                  <img :src="url" alt="" />
                  <p style="color:#2222222;font-size:15px;font-weight:550">
                    已收藏
                  </p>
                </div>
              </li>
              <li>
                <!-- 左图片，中信息，右图标 -->
                <div class="img">
                  <img :src="url" alt="" style="width:90px;height:90px" />
                </div>
                <div class="massage">
                  <p style="font-size:15px;font-weight:550">
                    优狗天津科技发展有限公司
                  </p>
                  <br />
                  <p style="font-size:12px;">zhongxiaoyi@162.com</p>
                  <br />
                  <p style="font-size:10px;color:f2f2f2">
                    联系方式：13512698562
                  </p>
                </div>
                <div class="collect">
                  <img :src="url" alt="" />
                  <p style="color:#2222222;font-size:15px;font-weight:550">
                    已收藏
                  </p>
                </div>
              </li>
              <li>
                <!-- 左图片，中信息，右图标 -->
                <div class="img">
                  <img :src="url" alt="" style="width:90px;height:90px" />
                </div>
                <div class="massage">
                  <p style="font-size:15px;font-weight:550">
                    优狗天津科技发展有限公司
                  </p>
                  <br />
                  <p style="font-size:12px;">zhongxiaoyi@162.com</p>
                  <br />
                  <p style="font-size:10px;color:f2f2f2">
                    联系方式：13512698562
                  </p>
                </div>
                <div class="collect">
                  <img :src="url" alt="" />
                  <p style="color:#2222222;font-size:15px;font-weight:550">
                    已收藏
                  </p>
                </div>
              </li>
            </ul>
          </div>

然后是css代码：

.info {
  background-color: #fff;
  height: 200px;
  padding: 40px;
  /* border: 1px solid; */
  /* margin-top: 20px; */
}
.info ul {
  display: flex;
  justify-content: space-between;
  flex-flow: wrap;
}
.info ul li {
  width: 25%;
  height: 130px;
  border: 1px solid #f7f7f7;
  padding: 20px;
  display: inline-block;
}
.img {
  width: 90px;
  height: 90px;
  float: left;
  border: 1px solid;
}
.massage {
  float: left;
  margin-left: 15px;
  /* width: 170px; */
  height: 90px;
  /* border: 1px solid; */
}
.massage p {
  color: #333333;
}
.collect {
  /* width: 50px; */
  height: 50px;
  margin-top: 20px;
  /* border: 1px solid; */
  float: left;
  margin-left: 15px;
}
.collect img {
  width: 30px;
  height: 30px;
  margin-left: 8px;
}

拿走用就行啦！