用div实现上下布局的问题？

Question

结构是这样的：

    <div class="video-box">
      <ul>
        <li v-for="(item, index) of Photographylist" :key="index">
          <div>
            <div :class="index == 0 ? 'video-title' : 'video-buttom-title'">
              {{ item.title }}
            </div>
            <div><img :src="item.imageUrl" alt="" /></div>
          </div>
        </li>
      </ul>
    </div>

样式是这样的：

.video-box {
  background: #fff;
  border-radius: 0 0 4px 4px;
  .video-title {
    height: 30px;
    font-size: 15px;
    color: #000;
    font-weight: bold;
    text-align: left;
    line-height: 30px;
    margin-left: 10px;
  }
  img {
    width: 100%;
    padding: 8px;
    border-radius: 16px;
    image-rendering: -moz-crisp-edges; /* Firefox */
    image-rendering: -o-crisp-edges; /* Opera */
    image-rendering: -webkit-optimize-contrast; /*Webkit (non-standard naming) */
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;
  }
  .video-buttom-title {
    font-size: 15px;
    color: #000;
    font-weight: bold;
  }

期望是

Answer 1

下面的两个盒子用的float浮动

<div class="video-box">
  <ul>
    <li :class="index == 0 ? 'video-title' : 'video-buttom-title'" v-for="(item, index) of Photographylist" :key="index">
        <div class="title">{{ item.title }}</div>
        <div><img :src="item.imageUrl" alt="" /></div>
    </li>
  </ul>
</div>

.video-box {
  background: #fff;
  border-radius: 0 0 4px 4px;
  ul {
    padding: 0 20px;
  }
  .video-title {
    margin-bottom: 15px;
    .title{
      height: 30px;
      font-size: 15px;
      color: #000;
      font-weight: bold;
      text-align: left;
      line-height: 30px;
      margin-left: 10px;
    }
  }
  .video-buttom-title {
    float: left;
    width: 45%;
    &:last-child {
      float: right;
    }
    .title {
      text-align: center;
      font-size: 15px;
      color: #000;
      font-weight: bold;
    }
  }
  img {
    width: 100%;
    border-radius: 16px;
    image-rendering: -moz-crisp-edges; /* Firefox */
    image-rendering: -o-crisp-edges; /* Opera */
    image-rendering: -webkit-optimize-contrast; /*Webkit (non-standard naming) */
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;
  }
}