1. 首页
  2. 问答
  3. 父元素不跟随子元素

父元素不跟随子元素

2017-08-24 253 views
-1

当我们设置一个父元素并递增子元素的内容时，父母的大小是否应该自动缩放以适合孩子？父元素不跟随子元素

相比之下，应用css属性（例如赋予它的背景）的父级不会针对父级进行缩放。这是我试图创建一个3列简单的布局，和父母不结垢，因此没有被应用边框底部：

REPL.IT

正如你所看到的，其内容被溢出的父母和一切不在父母身上。我应该如何解决这个问题？

来源

2017-08-24 mathmaniage

+2

首先，请去阅读[问]。相关代码直接属于您的问题，所以请对其进行相应编辑。 – CBroe

+2

然后，你想研究如何关闭浮动元素__。 – CBroe

+0

@lumio，标题？ – mathmaniage

回答

5

你需要的是你的#bodytext的clearfix，因为你所有的内容都是浮动的。

以下行添加到您的#bodytext：

#bodytext{ 
    overflow: auto; 
}

为了更好地理解，为什么你需要一个clearfix，read this answer。

来源

2017-08-24 09:04:10 lumio

+0

@lumino，谢谢。 – mathmaniage

+1

我添加了一个链接，并附有一些进一步的解释:) – lumio

+0

这很棒。 （看起来我只能在8分钟后接受答案） – mathmaniage

0

您可以使用display:inline-block：

#bodytext { 

    display:inline-block; 

}

来源

2017-08-24 09:05:03 Ivan

0

你需要做两两件事：一是给CSS overflow:hidden到#bodytext和第二毕竟3格即FirstParagraph，SecondParagraph，ThirdParagraph你把<div class="clear"></div>和CSS明确的阶级clear:both 。

来源

2017-08-24 09:05:44

0

只需使用float:left在#bodytext div来解决这个问题，检查下面的代码片段..

@font-face{ 
 
    font-family: "handlee"; 
 
    src : url("handlee.ttf"); 
 
} 
 
@font-face{ 
 
    font-family:"berkshirestyle"; 
 
    src: url("berkshire.ttf"); 
 
} 
 
body{ 
 

 
    background-image: url("glass.jpg"); 
 
    background-attachment: fixed; 
 
    background-repeat:no-repeat; 
 
    background-size:cover; 
 

 
} 
 
#FirstHeader{ 
 
    float:left; 
 
    clear:left; 
 
    padding-left:100px; 
 
    color:white; 
 
    font-size: 70px; 
 
    color: rgb(122, 38, 0); 
 
    text-decoration: underline; 
 
    font-family: handlee; 
 
    font-style: italic; 
 
} 
 

 
#bodytext{ 
 
    padding: 30px; 
 
    font-family: berkshirestyle, cursive; 
 
    font-size: 1em; 
 
    color: #BCBCBC; 
 
    float: left; 
 
} 
 

 

 

 
#bodytext{ 
 
    clear:left; 
 
    margin-left: 30px; 
 
    margin-bottom: 50px; 
 
    border-bottom: 10px solid red; 
 
    background-color: red; 
 

 
} 
 

 
#bodytext div{ 
 
    display: inline-block; 
 
    width: 30%; 
 
    margin-right: 20px; 
 
    float: left; 
 

 
} 
 

 

 
form{ 
 
    clear:both; 
 

 
}
<h1 id = "FirstHeader">Coffes here</h1> 
 
<img src="coffee.png" id = "Coffee" alt="coffee image" width="100" height="125"/> 
 

 

 
<div id = "bodytext"> 
 

 
    <div id = "FirstParagraph"> 
 
     Duis maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper, 
 
     Vivamus ut mi orci. Donec ut ipsum in nisl elementum posuere mollis id massa. 
 
     Cras mattis felis est, a varius nisl euismod ac. Mauris cursus sed nulla in viverra. 
 
     Duis maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper, 
 
     purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus 
 
     est. Nulla vel tortor id ligula consequat fringilla dignissim a sem. Duis eget risus vel 
 
     est ullamcorper auctor. Aliquam vel ex in leo suscipit condimentum sed vitae leo. In porta 
 
     eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante. 
 
     Vestibulum sit amet ligula faucibus ligula auctor pretium non vel arcu.<br> 
 
     purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus 
 
     Vivamus ut mi orci. Donec ut ipsum in nisl elementum posuere mollis id massa. 
 
     Cras mattis felis est, a varius nisl euismod ac. Mauris cursus sed nulla in viverra. 
 
     Duis maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper, 
 
     purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus 
 
     est. Nulla vel tortor id ligula consequat fringilla dignissim a sem. Duis eget risus vel 
 
     est ullamcorper auctor. Aliquam vel ex in leo suscipit condimentum sed vitae leo. In porta 
 
     eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante. 
 
     Vestibulum sit amet ligula faucibus ligula auctor pretium non vel arcu.purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus 
 
     Vivamus ut mi orci. Donec ut ipsum in nisl elementum posuere mollis id massa. 
 
     Cras mattis felis est, a varius nisl euismod ac. Mauris cursus sed nulla in viverra. 
 
     Duis maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper, 
 
     purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus 
 
     est. Nulla vel tortor id ligula consequat fringilla dignissim a sem. Duis eget risus vel 
 
     est ullamcorper auctor. Aliquam vel ex in leo suscipit condimentum sed vitae leo. In porta 
 
     eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante. 
 
     Vestibulum sit amet ligula faucibus ligula auctor pretium non vel arcu. 
 
    </div> 
 

 

 
    <div id = "SecondParagraph"> 
 
     purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus 
 
     Vivamus ut mi orci. Donec ut ipsum in nisl elementum posuere mollis id massa. 
 
     Cras mattis felis est, a varius nisl euismod ac. Mauris cursus sed nulla in viverra. 
 
     Duis maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper, 
 
     purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus 
 
     est. Nulla vel tortor id ligula consequat fringilla dignissim a sem. Duis eget risus vel 
 
     est ullamcorper auctor. Aliquam vel ex in leo suscipit condimentum sed vitae leo. In porta 
 
     eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante. 
 
     Vestibulum sit amet ligula faucibus ligula auctor pretium non vel arcu. 
 
     <br/> 
 
     purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus 
 
     Vivamus ut mi orci. Donec ut ipsum in nisl elementum posuere mollis id massa. 
 
     Cras mattis felis est, a varius nisl euismod ac. Mauris cursus sed nulla in viverra. 
 
     Duis maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper, 
 
     purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus 
 
     est. Nulla vel tortor id ligula consequat fringilla dignissim a sem. Duis eget risus vel 
 
     est ullamcorper auctor. Aliquam vel ex in leo suscipit condimentum sed vitae leo. In porta 
 
     eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante. 
 
     Vestibulum sit amet ligula faucibus ligula auctor pretium non vel arcu.purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus 
 
     Vivamus ut mi orci. Donec ut ipsum in nisl elementum posuere mollis id massa. 
 
     Cras mattis felis est, a varius nisl euismod ac. Mauris cursus sed nulla in viverra. 
 
     Duis maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper, 
 
     purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus 
 
     est. Nulla vel tortor id ligula consequat fringilla dignissim a sem. Duis eget risus vel 
 
     est ullamcorper auctor. Aliquam vel ex in leo suscipit condimentum sed vitae leo. In porta 
 
     eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante. 
 
     Vestibulum sit amet ligula faucibus ligula auctor pretium non vel arcu. 
 
    </div> 
 

 
    <div id = "ThirdParagraph"> 
 
     eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante. 
 
     Vivamus ut mi orci. Donec ut ipsum in nisl elementum posuere mollis id massa. 
 
     Cras mattis felis est, a varius nisl euismod ac. Mauris cursus sed nulla in viverra. 
 
     Duis maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper, 
 
     purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus 
 
     est. Nulla vel tortor id ligula consequat fringilla dignissim a sem. Duis eget risus vel 
 
     est ullamcorper auctor. Aliquam vel ex in leo suscipit condimentum sed vitae leo. In porta 
 
     eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante. 
 
     Vestibulum sit amet ligula faucibus ligula auctor pretium non vel arcu.purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus 
 
     Vivamus ut mi orci. Donec ut ipsum in nisl elementum posuere mollis id massa. 
 
     Cras mattis felis est, a varius nisl euismod ac. Mauris cursus sed nulla in viverra. 
 
     Duis maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper, 
 
     purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus 
 
     est. Nulla vel tortor id ligula consequat fringilla dignissim a sem. Duis eget risus vel 
 
     est ullamcorper auctor. Aliquam vel ex in leo suscipit condimentum sed vitae leo. In porta 
 
     eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante. 
 
     Vestibulum sit amet ligula faucibus ligula auctor pretium non vel arcu. 
 
     <br> 
 
     purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus 
 
     Vivamus ut mi orci. Donec ut ipsum in nisl elementum posuere mollis id massa. 
 
     Cras mattis felis est, a varius nisl euismod ac. Mauris cursus sed nulla in viverra. 
 
     Duis maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper, 
 
     purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus 
 
     est. Nulla vel tortor id ligula consequat fringilla dignissim a sem. Duis eget risus vel 
 
     est ullamcorper auctor. Aliquam vel ex in leo suscipit condimentum sed vitae leo. In porta 
 
     eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante. 
 
     Vestibulum sit amet ligula faucibus ligula auctor pretium non vel arcu. 
 
    </div> 
 
</div> 
 

 
<form id = "MainForm"> 
 

 
    <label for = "Name">Name: </label> 
 
    <input type="text" id = "Name" placeholder = "e.g nirajan basnet" required/> 
 

 
    <label for= "Email">Email</label> 
 
    <input type="email" id = "Email" placeholder="[email protected]" required/> 
 

 
    <label for = "Comment">Your comment: </label> 
 
    <br> 
 
    <textarea maxlength="100" id = "Comment" placeholder="What do you think about the site?"></textarea> 
 
</form>

来源

2017-08-24 09:05:54

1

你有没有正确清除的floats - 添加overflow: hidden到bodyText或添加after使用的元素clear: left：

#bodytext:after{ 
    clear: left; 
    content: ''; 
    display: block; 
}

请参见下面的演示：

@font-face { 
 
    font-family: "handlee"; 
 
    src: url("handlee.ttf"); 
 
} 
 

 
@font-face { 
 
    font-family: "berkshirestyle"; 
 
    src: url("berkshire.ttf"); 
 
} 
 

 
body { 
 
    background-image: url("glass.jpg"); 
 
    background-attachment: fixed; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
} 
 

 
#FirstHeader { 
 
    float: left; 
 
    clear: left; 
 
    padding-left: 100px; 
 
    color: white; 
 
    font-size: 70px; 
 
    color: rgb(122, 38, 0); 
 
    text-decoration: underline; 
 
    font-family: handlee; 
 
    font-style: italic; 
 
} 
 

 
#bodytext { 
 
    padding: 30px; 
 
    font-family: berkshirestyle, cursive; 
 
    font-size: 1em; 
 
    color: #BCBCBC; 
 
    overflow: hidden; 
 
} 
 

 
#bodytext:after{ 
 
    clear: left; 
 
    content: ''; 
 
    display: block; 
 
} 
 

 
#bodytext { 
 
    clear: left; 
 
    margin-left: 30px; 
 
    margin-bottom: 50px; 
 
    border-bottom: 10px solid red; 
 
    background-color: red; 
 
} 
 

 
#bodytext div { 
 
    display: inline-block; 
 
    width: 30%; 
 
    margin-right: 20px; 
 
    float: left; 
 
} 
 

 
form { 
 
    clear: both; 
 
}
<h1 id="FirstHeader">Coffes here</h1> 
 
<img src="coffee.png" id="Coffee" alt="coffee image" width="100" height="125" /> 
 

 

 
<div id="bodytext"> 
 

 
    <div id="FirstParagraph"> 
 
    Duis maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper, Vivamus ut mi orci. Donec ut ipsum in nisl elementum posuere mollis id massa. Cras mattis felis est, a varius nisl euismod ac. Mauris cursus sed nulla in viverra. Duis 
 
    maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper, purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus est. Nulla vel tortor id ligula consequat fringilla dignissim a sem. Duis eget risus 
 
    vel est ullamcorper auctor. Aliquam vel ex in leo suscipit condimentum sed vitae leo. In porta eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante. Vestibulum sit amet ligula faucibus ligula auctor pretium non 
 
    vel arcu.<br> purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus Vivamus ut mi orci. Donec ut ipsum in nisl elementum posuere mollis id massa. Cras mattis felis est, a varius nisl euismod ac. Mauris cursus sed 
 
    nulla in viverra. Duis maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper, purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus est. Nulla vel tortor id ligula consequat fringilla dignissim 
 
    a sem. Duis eget risus vel est ullamcorper auctor. Aliquam vel ex in leo suscipit condimentum sed vitae leo. In porta eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante. Vestibulum sit amet ligula faucibus 
 
    ligula auctor pretium non vel arcu.purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus Vivamus ut mi orci. Donec ut ipsum in nisl elementum posuere mollis id massa. Cras mattis felis est, a varius nisl euismod ac. 
 
    Mauris cursus sed nulla in viverra. Duis maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper, purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus est. Nulla vel tortor id ligula consequat fringilla 
 
    dignissim a sem. Duis eget risus vel est ullamcorper auctor. Aliquam vel ex in leo suscipit condimentum sed vitae leo. In porta eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante. Vestibulum sit amet ligula 
 
    faucibus ligula auctor pretium non vel arcu. 
 
    </div> 
 

 

 
    <div id="SecondParagraph"> 
 
    purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus Vivamus ut mi orci. Donec ut ipsum in nisl elementum posuere mollis id massa. Cras mattis felis est, a varius nisl euismod ac. Mauris cursus sed nulla in viverra. Duis 
 
    maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper, purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus est. Nulla vel tortor id ligula consequat fringilla dignissim a sem. Duis eget risus 
 
    vel est ullamcorper auctor. Aliquam vel ex in leo suscipit condimentum sed vitae leo. In porta eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante. Vestibulum sit amet ligula faucibus ligula auctor pretium non 
 
    vel arcu. 
 
    <br/> purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus Vivamus ut mi orci. Donec ut ipsum in nisl elementum posuere mollis id massa. Cras mattis felis est, a varius nisl euismod ac. Mauris cursus sed nulla in viverra. 
 
    Duis maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper, purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus est. Nulla vel tortor id ligula consequat fringilla dignissim a sem. Duis eget 
 
    risus vel est ullamcorper auctor. Aliquam vel ex in leo suscipit condimentum sed vitae leo. In porta eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante. Vestibulum sit amet ligula faucibus ligula auctor pretium 
 
    non vel arcu.purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus Vivamus ut mi orci. Donec ut ipsum in nisl elementum posuere mollis id massa. Cras mattis felis est, a varius nisl euismod ac. Mauris cursus sed nulla 
 
    in viverra. Duis maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper, purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus est. Nulla vel tortor id ligula consequat fringilla dignissim a sem. 
 
    Duis eget risus vel est ullamcorper auctor. Aliquam vel ex in leo suscipit condimentum sed vitae leo. In porta eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante. Vestibulum sit amet ligula faucibus ligula 
 
    auctor pretium non vel arcu. 
 
    </div> 
 

 
    <div id="ThirdParagraph"> 
 
    eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante. Vivamus ut mi orci. Donec ut ipsum in nisl elementum posuere mollis id massa. Cras mattis felis est, a varius nisl euismod ac. Mauris cursus sed nulla in viverra. 
 
    Duis maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper, purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus est. Nulla vel tortor id ligula consequat fringilla dignissim a sem. Duis eget 
 
    risus vel est ullamcorper auctor. Aliquam vel ex in leo suscipit condimentum sed vitae leo. In porta eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante. Vestibulum sit amet ligula faucibus ligula auctor pretium 
 
    non vel arcu.purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus Vivamus ut mi orci. Donec ut ipsum in nisl elementum posuere mollis id massa. Cras mattis felis est, a varius nisl euismod ac. Mauris cursus sed nulla 
 
    in viverra. Duis maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper, purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus est. Nulla vel tortor id ligula consequat fringilla dignissim a sem. 
 
    Duis eget risus vel est ullamcorper auctor. Aliquam vel ex in leo suscipit condimentum sed vitae leo. In porta eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante. Vestibulum sit amet ligula faucibus ligula 
 
    auctor pretium non vel arcu. 
 
    <br> purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus Vivamus ut mi orci. Donec ut ipsum in nisl elementum posuere mollis id massa. Cras mattis felis est, a varius nisl euismod ac. Mauris cursus sed nulla in viverra. 
 
    Duis maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper, purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus est. Nulla vel tortor id ligula consequat fringilla dignissim a sem. Duis eget 
 
    risus vel est ullamcorper auctor. Aliquam vel ex in leo suscipit condimentum sed vitae leo. In porta eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante. Vestibulum sit amet ligula faucibus ligula auctor pretium 
 
    non vel arcu. 
 
    </div> 
 

 
</div> 
 

 
<form id="MainForm"> 
 

 
    <label for="Name">Name: </label> 
 
    <input type="text" id="Name" placeholder="e.g nirajan basnet" required/> 
 

 
    <label for="Email">Email</label> 
 
    <input type="email" id="Email" placeholder="[email protected]" required/> 
 

 
    <label for="Comment">Your comment: </label> 
 
    <br> 
 
    <textarea maxlength="100" id="Comment" placeholder="What do you think about the site?"></textarea> 
 
</form>
所有的

来源

2017-08-24 09:06:51 kukkuz

相关问题

 相关问题