css column列属性 布局不换列

今天在还原一个h5页面，用到了瀑布流，使用column列，在过程中遇到了一个问题，在这里记录一下

实现代码

<div class="card-list">
          <div class="card-item">
            <div class="cover-img">
              <img
                src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1806291951,1961857200&fm=11&gp=0.jpg"
                alt="封面图"
              />
              <div class="open-app">打开App</div>
            </div>
            <div class="card-info">
              <ul class="tag-list">
                <li>三居</li>
                <li>15万</li>
                <li>简约现代</li>
              </ul>
              <h4 class="card-title">7步做出详细预算清单内附清单模版</h4>
              <div class="card-extra-info">
                <div class="card-author">
                  <img
                    src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1693267874,2588991282&fm=11&gp=0.jpg"
                    alt="作者头像"
                  />
                  <span class="author">小雨</span>
                </div>
                <div class="likes-info">
                  <img src="./assets/icons/like-active@2x.png" alt="点赞图标" />
                  <span class="like-count">1.2w</span>
                </div>
              </div>
            </div>
          </div>
          <div class="card-item">
            <div class="cover-img">
              <img
                src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606452745936&di=d4881d7f432ce933bbbdf573f07780c2&imgtype=0&src=http%3A%2F%2Fimg.fuwo.com%2Ftuce%2F1603%2F23%2F7e149030f09d11e5a56200163e00254c.jpg"
                alt="封面图"
              />
              <div class="open-app">打开App</div>
            </div>
            <div class="card-info">
              <ul class="tag-list">
                <li>三居</li>
                <li>15万</li>
                <li>简约现代</li>
              </ul>
              <h4 class="card-title">7步做出详细预算清单内附清单模版</h4>
              <div class="card-extra-info">
                <div class="card-author">
                  <img
                    src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1693267874,2588991282&fm=11&gp=0.jpg"
                    alt="作者头像"
                  />
                  <span class="author">小雨</span>
                </div>
                <div class="likes-info">
                  <img src="./assets/icons/like-active@2x.png" alt="点赞图标" />
                  <span class="like-count">1.2w</span>
                </div>
              </div>
            </div>
          </div>
          <div class="card-item">
            <div class="cover-img">
              <img
                src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3080303564,1950435031&fm=26&gp=0.jpg"
                alt="封面图"
              />
              <div class="open-app">打开App</div>
            </div>
            <div class="card-info">
              <ul class="tag-list">
                <li>三居</li>
                <li>15万</li>
                <li>简约现代</li>
              </ul>
              <h4 class="card-title">7步做出详细预算清单内附清单模版</h4>
              <div class="card-extra-info">
                <div class="card-author">
                  <img
                    src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1693267874,2588991282&fm=11&gp=0.jpg"
                    alt="作者头像"
                  />
                  <span class="author">小雨</span>
                </div>
                <div class="likes-info">
                  <img src="./assets/icons/like-active@2x.png" alt="点赞图标" />
                  <span class="like-count">1.2w</span>
                </div>
              </div>
            </div>
          </div>
          <div class="card-item">
            <div class="cover-img">
              <img
                src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606452745936&di=b278c707cd78c7ba13647fd868204b99&imgtype=0&src=http%3A%2F%2Fp1.pstatp.com%2Flarge%2F31db00021ca53e6e6c39"
                alt="封面图"
              />
              <div class="open-app">打开App</div>
            </div>
            <div class="card-info">
              <ul class="tag-list">
                <li>三居</li>
                <li>15万</li>
                <li>简约现代</li>
              </ul>
              <h4 class="card-title">7步做出详细预算清单内附清单模版</h4>
              <div class="card-extra-info">
                <div class="card-author">
                  <img
                    src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1693267874,2588991282&fm=11&gp=0.jpg"
                    alt="作者头像"
                  />
                  <span class="author">小雨</span>
                </div>
                <div class="likes-info">
                  <img src="./assets/icons/like-active@2x.png" alt="点赞图标" />
                  <span class="like-count">1.2w</span>
                </div>
              </div>
            </div>
          </div>
        </div>

.recommend {
  background: #f8fafc;
  padding: 0 8px 50px 8px;
}
.card-list {
  column-count: 2;
  column-gap: 8px;
}
.card-item {
  background-color: #fff;
  margin-bottom: 10px;
}
.cover-img {
  position: relative;
  border-radius: 6px;
}
.open-app {
  position: absolute;
  bottom: 4px;
  width: 63.3px;
  height: 21px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 0 6px 0 2px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  line-height: 21px;
}

.cover-img img {
  width: 100%;
  border-radius: 6px 6px 2px 2px;
  -webkit-border-radius: 6px 6px 2px 2px;
  -moz-border-radius: 6px 6px 2px 2px;
  -ms-border-radius: 6px 6px 2px 2px;
  -o-border-radius: 6px 6px 2px 2px;
}

.card-info {
  padding: 12px;
}

.tag-list li {
  float: left;
  color: #999999;
  padding: 0 8px;
  font-size: 11px;
  position: relative;
}
.tag-list li:nth-child(1) {
  padding-left: 0;
}
.tag-list li::after {
  content: "";
  display: block;
  position: absolute;
  height: 8px;
  width: 0.5px;
  background-color: #e9e9e9;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  right: 0;
}
.tag-list li:last-child::after {
  display: none;
}
/* 清楚浮动 */
.tag-list::after {
  content: "";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

.card-title {
  font-size: 14px;
  color: #333333;
  letter-spacing: 0;
  text-align: justify;
  padding: 10px 0;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.card-extra-info {
  display: flex;
  justify-content: space-between;
}
.card-author .author {
  font-size: 11px;
  color: #666666;
}
.card-author img {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  vertical-align: middle;
}
.likes-info img {
  width: 12px;
  height: 12px;
  vertical-align: middle;
}

这里得作者信息跑到了第二列去了
解决：只需要将每一项得display改为inline-block;

.card-item {
  background-color: #fff;
  margin-bottom: 10px;
  display: inline-block;
}