javascript - 如果 div 框较高，则不会将其他内容压低

Question

我在 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;">&#8249;</b></a></li>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li><a style="opacity:1;padding-top:1px;margin-left:6px;">TOP OF THE WEEK</a>&nbsp;</li>    
<li><div class="menu-clear"></div></li> 
<li><a class="carousel_next next" href="#"><b style="font-size: 20px;">&#8250;</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>

我尝试放置工作示例，但没有成功，因为我的帖子是自动添加的。如果有人知道解决此问题的方法，请分享解决方案。谢谢，祝你有美好的一天!

Answer 1

我认为这是因为 instagram 图片 div 中的右浮动样式。尝试将该 div 放入带有 class sidebox 的 div 中

<div class="sidebox">
...
<div class="slick">
..
</div>
<div class="followus">
</div>
</div>

和CSS:

.followus {
    position: relative;

    right: 16.3%;
    margin-top: 12%;
}

希望对您有所帮助。