Question

我正在尝试向<p>添加<div class="titleheader">。所以在我的div中作为这样的子元素：<div class="titleheader"><p>generic text </p></div>。

但是当我尝试添加<p>时，我的<div class="titleheader">并没有停留在同一位置并向下移动。为什么会这样？

http://jsbin.com/yitazifivu/1/edit?html,css,output＆lt; - jsbin。

编辑：添加溢出隐藏似乎是诀窍（thx kameer），但为什么它实际上没有它... ...？我很好奇刚刚发生了什么，并试图学习。

＆＃13;

/* css bestand */

body {
    margin: 0;
}

.container{ 
    background-color: gainsboro;
    width: 1000px;
    height: 950px;
    max-height: 950px;
    margin: auto;
}

.blank1 {
    background-color: white;
    display: inline-block;
    width: 9%;
    height: 9%;
    margin: 10px 30px 60px 65px;
}

.titleheader {
    display: inline-block;
    background-color: #3B3F40;
    width: 65%;
    height: 15%;
    margin-bottom: 20px;
}

.content {
    display: block;
    background-color: gray;
    width: 100%;
    height: 33%;
}

.small-a {
    background-color: white;
    display: inline-block;
    width: 14%;
    height: 3%;
    margin-left: 3%;
    margin-top: 1%;
}

.small-b {
    display: inline-block;
    float: right;
    background-color: white;
    margin-top: 1%;
    margin-right: 5%;
    width: 12%;
    height: 3%;
}

.main-area {
    display: block;
    background-color: gainsboro;
    width: 100%;
    height: 100%;
}

.straight-a {
    float: left; 
    background-color: white;
    margin: 0 10% 0 1%;
    width: 5%;
    height: 20%;
}

.main-area-content {
    float: left;
    background-color: white;
    width: 70%;
    height: 100%;
}

.straight-b {
    float: left;
    background-color: white;
    width: 5%;
    height: 20%;
    margin-left: 8%;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Mert Porfolio</title>
        <meta charset="utf-8"><link rel="stylesheet" href="main.css">
    </head>
    
    <body>
        <div class="container">
            <div class="blank1"></div>
            <div class="titleheader"></div>
            
            <div class="content">
            
            </div>
            
            <div class="small-a"></div>
            <div class="small-b"></div>
            
            <div class="balk-a"></div>
            <div class="content-b"></div>
            
            <div class="main-area">
                <div class="straight-a"></div>
                <div class="main-area-content"></div>
                <div class="straight-b"></div>
            </div>
        </div>
        
    </body>
</html>

＆＃13;

Answer 1

我曾经遇到过同样的问题。它与display: inline-block的{{1}}有关。

.blank1

这应该可以解决问题。

Answer 2

<p>标记默认有边距。所以尝试重置它们：

p {margin: 0;}
.titleheader {overflow: hidden;}

工作输出：http://jsbin.com/zohapoyivi/1/edit?html,output

Answer 3

这是因为display属性的工作原理。要快速解决此问题，您需要添加新的$scope.timeDisplay = $scope.timeDisplay[0];标记属性：p，然后就完成了。

为什么在添加段落时我的div会向下移动？

3 个答案: