Question

当文本较长时，它将右边的下一行推到右边，并留出间隔，相反，我希望它只是将内容向下推并保持行内以下

在图像中，您可以看到我的意思，它将内容向右移动。

代码现在看起来像这样，任何帮助都会很棒

HTML

<?php 
        while($row = mysqli_fetch_assoc($newlyAddedVideos))
        {
            $ImageURL = $row['youtubethumbnail'];
            $newlyAddedSongName = $row['songname'];
    ?>

      <div class="column newvideos">
        <div class="card">
        <a href="">
          <img src="<?php echo $ImageURL; ?>" alt="John" style="width:170px; height:100px;">
          <div class="person-container">
            <!--<h2>John Doe</h2>-->
            <p class="title new-video-title"><?php echo $newlyAddedSongName; ?></p>
            <!--<p>Some text that describes me lorem ipsum ipsum lorem.</p>
            <p>example@example.com</p>
            <p><button class="button">Contact</button></p>-->
          </div>
        </a>
        </div>
      </div>
     <?php } ?> 

    </div>

CSS

.person-videos-text{
    padding-top:20PX;
}
.links{
    padding-top:10px;
    padding-left: 230px;
}
   .column {
  float: left;
  width: 130px;
  margin-bottom: 16px;
  //padding: 0 8px;
  word-wrap: break-word;

}

.normal{
    margin-right:10px;
}

.trending{
    margin-right:123px;
}

.newvideos{
    margin-right:58.3px;
}

/* Display the columns below each other instead of side by side on small screens */
@media screen and (max-width: 650px) {
  .column {
    width: 100%;
    display: block;
  }
}

.trending-image-size{
    width:230px; 
    height:120px;
}

/* Add some shadows to create a card effect */
.card {
  //box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

/* Some left and right padding inside the container */
.person-container {
  //padding: 0 16px;

}

/* Clear floats */
.person-container::after, .row::after {
  content: "";
  clear: both;
  display: table;

}

.row{

}

.person-name{
    font-size:21px;
    text-decoration: none;
    padding-top:5px;
}

.title {
  color: grey;
  padding-top: 85px;

}

.main-heading{
    padding-top:30px;
}

.trending-title{
    width:230px;
    padding-top: 130px;
}

.new-video-title{
    width:170px;
    padding-top: 110px;
}

Answer 1

请尝试使用此CSS

    <style>
    .row {
      display: flex;
      flex-wrap: wrap;
    }
.column {
 display: flex;
flex-direction: column;
}
    </style>

如果文字很长，则将内容下推

1 个答案: