Question

我有以下的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>

这里我试图在主div内创建一个容器div（边距），每边的间隔为10像素，但是当我在网络浏览器中查看时，它是重叠的。请让我知道我哪里错了。

Here是小提琴。

由于

Answer 1

Offcourse它是重叠的。在你的.main类中你已经设置了一个高度，并且它不够高。另外，如果你想绝对确定没有任何东西超过你的div，请在css中设置溢出！

Answer 2

使主div的高度为：

 .main {
            width: 900px;
            height: auto;
            border: 1px solid black;
            position:relative;
        }

DEMO：http://jsfiddle.net/V9N3u/2/

Answer 3

现在定义您的.main min-height和删除 height

就像这样

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

Answer 4

试试这个

.main class的最小高度

.main {
        width: 900px;
        min-height: 320px;
        border: 1px solid black;
        position:relative;
    }

Answer 5

其他人对height。

是正确的

您可能还想删除margin-bottom .bot以消除额外的间距（除非是故意的）：

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

你的html中还有一个"太多：

<body>
...
    <div class="bot_R""></div>

在div中创建一个div

5 个答案: