<分区>
html - 如果文本很长，则将内容向下推
当文本较长时，它会将下一行推到右边并留下空隙，相反我希望它只是将内容向下推并使内容保持在行内
在图像中，您可以看到我所说的将内容向右移动的意思。
这是代码现在的样子，任何帮助都会很棒
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;
}
最佳答案
请试试这个 css
<style>
.row {
display: flex;
flex-wrap: wrap;
}
.column {
display: flex;
flex-direction: column;
}
</style>
关于html - 如果文本很长，则将内容向下推，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53943962/