Div定位不符合预期

Question

我有以下PHP页面

<?php include 'header-adminpanel.php'; ?>
<div class="container">

    <div class="body-content">
        <div class="side-left"><?php include 'adminproduct_sidebar.php'; ?></div>
        <div class="side-right"></div>

    </div> 

</div>
<?php include 'footer.php'; ?>

我期望输出为

但真正的输出是

样式如下;

.side-left{

     width: 250px;
    float: left;
    height: auto;


}
.side-right{

     width: 750px;
    float: left;
    height: auto;


}
.body-content{
        height:auto;
    width: 1000px;
    margin:auto;


} 
.container {
    height: auto;
    width: 100%;
}

如果没有那些“左侧”和“侧右”的div，它看起来很好，如下所示

我的代码出了什么问题？任何建议..

Answer 1

你应该在包含页脚之前添加它。这应该解决问题。

<div style="clear:both"></div>

Answer 2

添加

<div style="clear:both"></div>

行前

，

<?php include 'footer.php'; ?>

Answer 3

您正在使用浮动元素，因为没有内容，它们会崩溃。

将clearfix添加到body-content。

另请查看Why doesn't the height of a container element increase if it contains floated elements?和What does the CSS rule clear: both do?

Answer 4

在页脚div之前添加Clear，请尝试以下

<?php include 'header-adminpanel.php'; ?>
<div class="container">

    <div class="body-content">
        <div class="side-left"><?php include 'adminproduct_sidebar.php'; ?></div>
        <div class="side-right"></div>

    </div> 

</div>
<div style="clear:both"></div>
<?php include 'footer.php'; ?>

Example

Answer 5

页脚滑动到'.container'右侧的唯一原因是'.container'div的子项有浮动属性。

因此，为了快速修复，请将“clear：both”添加到“.container”div以及页脚div或空div。

如果这不能解决问题，我们需要查看页脚，左侧和右侧的html。

Answer 6

这是两个解决方案

首先使用Clear清除浮动：两者

另一个添加溢出：auto to parent div

这是代码

HTML：

<div class="body-content">
    <div class="side-left"><?php include 'adminproduct_sidebar.php'; ?></div>
    <div class="side-right"></div>
    <div style="clear:both"></div>
</div> 

另一种解决方案是

只需添加一个CSS

.body-content{
overflow:auto;
} 

希望它可以帮助你：）