Javascript 如果div框更高,则它不会';不要向下推其他内容

Javascript 如果div框更高,则它不会';不要向下推其他内容,javascript,php,html,css,Javascript,Php,Html,Css,我在stackoverflow上搜索了这个问题,并尝试了解决方案,但没有帮助。这可能是因为我的代码有点不同 我有一个网站,用户可以发布供词,前三名供词显示在盒子里,盒子下面有一个有图像的div。如果供词太长,它不会把盒子压下去,只会把它翻过去 侧框 .sidebox { float: right; margin-top: 0.5%; width: 300px; height: 150px; position: relative; left: -

我在stackoverflow上搜索了这个问题,并尝试了解决方案,但没有帮助。这可能是因为我的代码有点不同

我有一个网站,用户可以发布供词,前三名供词显示在盒子里,盒子下面有一个有图像的div。如果供词太长,它不会把盒子压下去,只会把它翻过去

侧框

.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%;
}
供认科

.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>


我想这是因为instagram picture div中的右浮动样式。 试着把那个div放在带有类的侧框的div中

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

希望能有所帮助。

谢谢BG1,这很有帮助,现在一切都很好。