Html 在一个div内做一个div_Html_Css

Html 在一个div内做一个div

html css

Html 在一个div内做一个div,html,css,Html,Css,我有下面的html代码 <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml" style="margins"> <head> <meta charset="utf-8" /> <style type="text/css"> .main { width: 900px; hei

我有下面的html代码

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml" style="margins">
<head>
    <meta charset="utf-8" />
    <style type="text/css">
        .main {
            width: 900px;
            height: 320px;
            border: 1px solid black;
            position:relative;
        }

        .margins {
            padding:10px 10px 10px 10px;
            border: 1px solid black;

        }

        .top_H {
            width: 720px;
            height: 80px;
            border: 1px solid black;
        }

        .mid {
            display: inline-block;
            clear: both;
            margin-top: 10px;
            margin-bottom: 10px;
            border: 1px solid black;
        }

        .mid_L {
            width: 200px;
            height: 120px;
            float: left;
            margin-right:10px;
            border: 1px solid black;
        }

        .mid_C {
            width: 200px;
            height: 120px;
            float: left;
            border: 1px solid black;
            margin-right:10px;
        }

        .mid_R {
            width: 200px;
            height: 120px;
            float: left;
            border: 1px solid black;
        }

        .bot {
            display: inline-block;
            clear: both;
            margin-bottom: 10px;
            border: 1px solid black;
        }

        .bot_L {
            width: 450px;
            height: 80px;
            float:left;
            border: 1px solid black;
        }

        .bot_R {
            width: 200px;
            height: 80px;
            float: left;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="margins">
        <div class="top_H"></div>
            <div class="mid">
         <div class="mid_L"></div>
        <div class="mid_C"></div>
        <div class="mid_R"></div>
                </div>
            <div class="bot">
        <div class="bot_L"></div>
        <div class="bot_R""></div>
                </div>
    </div>
   </div>
</body>
</html>


梅因先生{
宽度：900px；
高度：320px；
边框：1px纯黑；
位置：相对位置；
}
.利润{
填充：10px 10px 10px 10px；
边框：1px纯黑；
}
.托普{
宽度：720px；
高度：80px；
边框：1px纯黑；
}
.中{
显示：内联块；
明确：两者皆有；
边缘顶部：10px；
边缘底部：10px；
边框：1px纯黑；
}
中庭{
宽度：200px；
高度：120px；
浮动：左；
右边距：10px；
边框：1px纯黑；
}
.mid_C{
宽度：200px；
高度：120px；
浮动：左；
边框：1px纯黑；
右边距：10px；
}
中区{
宽度：200px；
高度：120px；
浮动：左；
边框：1px纯黑；
}
.机器人{
显示：内联块；
明确：两者皆有；
边缘底部：10px；
边框：1px纯黑；
}
伯图{
宽度：450px；
高度：80px；
浮动：左；
边框：1px纯黑；
}
伯图{
宽度：200px；
高度：80px；
浮动：左；
边框：1px纯黑；
}
当然，它是重叠的。在你的主课上，你设定了一个高度，但不够高。此外，如果您想绝对确保没有任何内容超出您的div，请在css中设置一个溢出
 使主分区的高度自动：
 .main {
            width: 900px;
            height: auto;
            border: 1px solid black;
            position:relative;
        }

演示：
现在定义您的.main
最小高度
和删除高度

像这样
.main {
            height: 320px; // remove this
            min-height: 320px;  // add this
        }

试试这个
主类的最小高度
.main {
        width: 900px;
        min-height: 320px;
        border: 1px solid black;
        position:relative;
    }

其他人对高度的看法是正确的
您可能还需要删除.bot
的页边距底部
，以消除额外的间距（除非是故意的）：
您的html中还有一个过多的“
：
<body>
...
    <div class="bot_R""></div>


...
您已经定义了height，您希望得到什么？您的height.main{height:320px；}导致了问题。
<body>
...
    <div class="bot_R""></div>