Question

如何将此Flex-Box项目移动到img的下一个？

https://i.stack.imgur.com/eSy3w.png

In [208]: df = pd.concat([df] * 10**4, ignore_index=True)

In [209]: df.shape
Out[209]: (120000, 4)

In [210]: %timeit df.groupby(['student','topic']).size().to_frame('messages').reset_index()
10 loops, best of 3: 32.6 ms per loop

In [211]: %timeit df.groupby(['student','topic']).size().reset_index(name='messages')
10 loops, best of 3: 32.4 ms per loop

In [212]: from collections import Counter

In [213]: %%timeit
     ...: s = pd.Series(Counter(zip(df.student, df.topic)), name='messages')
     ...: s.rename_axis(['student', 'topic']).reset_index()
     ...:
10 loops, best of 3: 90.3 ms per loop

In [214]: %%timeit
     ...: s = pd.value_counts(list(zip(df.student, df.topic)))
     ...: pd.DataFrame(
     ...:     np.column_stack([s.index.tolist(), s.values]),
     ...:     columns=['student', 'topic', 'messages'])
     ...:
10 loops, best of 3: 83.4 ms per loop

CSS

 <div class="brif fb">
                <div class="sml-con"><img class="sml-thumb" src="images/chosen/edward.jpg" alt=""></div>
                <h3>The WhiteBeard Pirates</h3>
                <div class="trai"> <i class="fa fa-video-camera mr5"></i> <span>Trailer</span></div>
                <p>Meet the most unusual baby, known only as "Baby", who wears a suit, speaks with the voice and wit of Alec Baldwin, as he teams up with is seven-year old brother to stop the dastardly plot of the CEO of Puppy Co.</p>

Answer 1

如果您在文字<div class="wrapper">周围添加了一个包装，请添加display: flex;并删除flex-wrap: wrap;，它们将保持并排

.brif {
  width: 69%;
  display: flex;
  padding: 17px;
  align-items: flex-start;
  /* prevent the childs from taking full height */
}

.brif .sml-con {
  width: 140px;
  height: 210px;
}

.brif .sml-thumb {
  width: 100%;
  height: 100%;
}

.brif h3 {
  padding: 9px 15px;
}

.brif .trai {
  background: #0397D6;
  padding: 5px 9px;
  border-radius: 10px;
  margin: 5px 0;
}

.brif .trai i {
  margin-right: 1px;
}

<div class="brif fb">
  <div class="sml-con">
    <img class="sml-thumb" src="images/chosen/edward.jpg" alt="">
  </div>
  <div class="wrapper">
    <h3>The WhiteBeard Pirates</h3>
    <div class="trai">
      <i class="fa fa-video-camera mr5"></i>
      <span>Trailer</span>
    </div>
    <p>Meet the most unusual baby, known only as "Baby", who wears a suit, speaks with the voice and wit of Alec Baldwin, as he teams up with is seven-year old brother to stop the dastardly plot of the CEO of Puppy Co.</p>
  </div>
</div>

如何将此Flex-Box项目移动到img的下一个？

1 个答案: