我在stackoverflow上搜索了此问题，并尝试了解决方案，但没有帮助。可能是因为我的代码没什么不同。
我有一个网站，用户可以在其中发布自白，框中显示前三名自白，在该框下有一个带有图片的div。如果坦白的时间太长，它不会将盒子推到下面，而是将其移到上方。
This is how it is when the confession is higher, if its even more higher it goes more and more under
This is how I want it to be, so to automatically add a space if the confession is higher
边箱
.sidebox {
float: right;
margin-top: 0.5%;
width: 300px;
height: 150px;
position: relative;
left: -32%;
}
Instagram图片及其div
.followus {
position: relative;
float: right;
right: 16.3%;
margin-top: 12%;
}
自白区
.followus {
position: relative;
float: right;
right: 16.3%;
margin-top: 12%;
}
侧边栏HTML
<!-- SIDE BOX -->
<div class="sidebox">
<?php
$select = "SELECT confessions.confessId,
(IFNULL(confessions.firstName, '')) AS firstName,
confessions.confessText,
DATE_FORMAT(confessions.postDate,'%b %d %Y %h:%i %p') AS postDate,
hasImage,
UNIX_TIMESTAMP(confessions.postDate) AS orderDate,
confessions.isActive,
(SELECT COUNT(*) FROM views WHERE views.confessId = confessions.confessId ) as totalViews,
(SELECT COUNT(*) FROM likes WHERE likes.confessId = confessions.confessId ) as totalLikes,
(SELECT COUNT(*) FROM dislikes WHERE dislikes.confessId = confessions.confessId ) as totalDislikes
FROM
confessions
WHERE isActive = 1
ORDER BY totalViews DESC , orderDate DESC limit 3";
$resss = mysqli_query($mysqli, $select) or die('-3' . mysqli_error()); ?>
<div id="sticky-nav" style="height:36px;" class="absolute" style="z-index:0">
<div id="width-limit">
<div class="options">
<ul class="menu">
<li><a class="carousel_prev previous" href="#"><b style="font-size: 20px;">‹</b></a></li>
<li><a style="opacity:1;padding-top:1px;margin-left:6px;">TOP OF THE WEEK</a> </li>
<li><div class="menu-clear"></div></li>
<li><a class="carousel_next next" href="#"><b style="font-size: 20px;">›</b></a></li>
</ul>
</div>
<div class="options" id="opt2" style="float:right; width:280px;display:none;">
<ul style="display: inline-block;float:right;">
</ul>
</div><div class="options" id="opt2" style="float:right; width:280px;display:none;">
<ul style="display: inline-block;float:right;">
</ul>
</div>
<div id="small-logo"></div>
<div class="clearfix"></div>
</div></div>
<div class="slick">
<?php
while ($row = mysqli_fetch_assoc($resss)) {
// Get Total Comments
$comssql = "SELECT 'X' FROM comments WHERE confessId = ".$row['confessId']." AND isActive = 1";
$commentstotal = mysqli_query($mysqli, $comssql) or die('-4'.mysqli_error());
$totComments = mysqli_num_rows($commentstotal);
if ($totComments == '1') { $comText = 'Comment'; } else { $comText = 'Comments'; }
if ($row['totalViews'] == '1') { $viewText = 'View'; } else { $viewText = 'Views'; }
$shareURL = $set['installUrl'].'page.php?page=view&confession='.$row['confessId'];
?>
<div class="confession" style="margin-left: 0;width: 300px;">
<div class="left"><span class="label2 label-confess1"><?php echo $row['totalViews'].' '.$viewText; ?></span></div>
<div class="right"><span class="bestthisweek"></span></div>
<div class="confessionstyle" style="margin-top:20px;"><p>
<font color="#fff3b2">
<?php
if ($filterProfanity == '0') {
echo nl2br(htmlspecialchars(filterwords($row['confessText'])));
} else {
echo nl2br(htmlspecialchars($row['confessText']));
}
?>
</font>
</p></div>
<input type="hidden" id="confessId" name="confessId_<?php echo $count; ?>" value="<?php echo $row['confessId']; ?>" />
<?php
$chkLikes = mysqli_query($mysqli,"SELECT 'X' FROM likes WHERE confessId = ".$row['confessId']." AND likeIp = '".$_SERVER['REMOTE_ADDR']."' LIMIT 1");
$hasLike = mysqli_num_rows($chkLikes);
$likeCSS = $hasLike > 0 ? 'text-info' : 'white';
$chkDislikes = mysqli_query($mysqli,"SELECT 'X' FROM dislikes WHERE confessId = ".$row['confessId']." AND dislikeIp = '".$_SERVER['REMOTE_ADDR']."' LIMIT 1");
$hasDislike = mysqli_num_rows($chkDislikes);
$dislikeCSS = $hasDislike > 0 ? 'text-danger' : 'white';
?>
<div class="confession-actions">
<div class="likes" style="width: 75px;">
<span class="label2 label-confess first liked">
<a href="" id="likeIt_<?php echo $row['confessId']; ?>" class="likeIt_<?php echo $count; ?> <?php echo $likeCSS; ?>">
<i class="fas fa-thumbs-up"></i> <span id="likesVal_<?php echo $row['confessId']; ?>"><?php echo $row['totalLikes']; ?></span>
</a>
</span>
</div>
<div class="dislikes" style="width: 75px;">
<span class="label2 label-confess disliked">
<a href="" id="dislikeIt_<?php echo $row['confessId']; ?>" class="dislike_<?php echo $count; ?> <?php echo $dislikeCSS; ?>">
<span id="dislikesVal_<?php echo $row['confessId']; ?>"><?php echo $row['totalDislikes']; ?></span> <i class="fas fa-thumbs-down"></i>
</a>
</span>
</div>
<?php if ($row['hasImage'] != '0') { ?>
<span class="label label-confess"><i class="fa fa-picture-o img"></i></span>
<?php } ?>
<div class="comments">
<div class="divide" style="width: 75px;"><div id="comments-hvr"><a href="page.php?page=view&confession=<?php echo $row['confessId']; ?>">
<i class="fa fa-comments"></i> <?php echo $totComments.' '; ?></a></div></div>
</div>
<div class="divide2" style="width: 75px;"><a href="https://twitter.com/intent/tweet?text=<?php echo $set['siteName']; ?>%20Confession:%20<?php echo ellipsis($row['confessText'],65); ?>%20&url=<?php echo $shareURL; ?>" class="btn btn-tw btn-sm" target="_blank" data-toggle="tooltip" data-placement="top" title="<?php echo $twitterShareTooltip; ?>">
<i class="fab fa-twitter" style="color:white"></i>
</a></div></div>
<div class="clearfix"></div>
</div>
<?php
}
?>
</div>
</div>
我尝试放置工作示例，但没有成功，因为我的帖子被自动添加。如果有人知道解决方法，请分享解决方案。谢谢，祝你有美好的一天！
答案 0 :(得分：1)
我认为这是因为instagram图片div中的浮动右样式。 尝试将div放在带有sidebox类的div中
<div class="sidebox">
...
<div class="slick">
..
</div>
<div class="followus">
</div>
</div>
和css：
.followus {
position: relative;
right: 16.3%;
margin-top: 12%;
}
希望有帮助。