1. Accueil
  2. Question et réponse
  3. élément parent ne suivant pas l'élément enfant

élément parent ne suivant pas l'élément enfant

2017-08-24 6 views
-1

Lorsque nous configurons un élément parent et incrémente le contenu des éléments enfants, la taille des parents ne doit-elle pas automatiquement s'adapter à l'enfant? En revanche, le parent ayant appliqué les propriétés css, telles que l'arrière-plan qui lui est donné, n'a pas d'échelle pour le parent. Voici ma tentative de création d'une simple mise en page 3 colonnes, et le parent non mise à l'échelle, et donc le fond de la frontière n'est pas appliquée:élément parent ne suivant pas l'élément enfant

REPL.IT

Comme vous pouvez le voir, le contenu débordent le parent et tout n'est pas inclus dans le parent. Comment devrais-je résoudre ce problème?

Source

2017-08-24 mathmaniage

+2

Tout d'abord, s'il vous plaît allez lire [demander]. Le code pertinent appartient directement à votre question, veuillez l'éditer en conséquence. – CBroe

+2

Et puis, vous voulez aller chercher comment _enclose éléments flottants_. – CBroe

+0

@lumio, en-tête? – mathmaniage

Répondre

5

Ce dont vous avez besoin est un clearfix sur votre #bodytext car tout votre contenu flotte.

Ajoutez la ligne suivante à votre #bodytext:

#bodytext{ 
    overflow: auto; 
}

Pour une meilleure compréhension, pourquoi vous avez besoin d'un clearfix, read this answer.

Source

2017-08-24 09:04:10 lumio

+0

@lumino, merci. – mathmaniage

+1

J'ai ajouté un lien avec quelques explications supplémentaires :) – lumio

+0

c'est génial. (Il semble que je ne peux accepter la réponse qu'après 8 min.) – mathmaniage

0

Vous pouvez utiliser display:inline-block:

#bodytext { 

    display:inline-block; 

}

Source

2017-08-24 09:05:03 Ivan

0

Vous devez faire deux choses: d'abord donner css overflow:hidden-#bodytext et seconde après tout 3 div-à-dire FirstParagraph, SecondParagraph, ThirdParagraph vous mettez <div class="clear"></div> et css pour la classe claire clear:both .

Source

2017-08-24 09:05:44

0

Il suffit d'utiliser float:left dans #bodytext div pour résoudre ce problème, vérifiez snippet ci-dessous ..

@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>

Source

2017-08-24 09:05:54

1

Vous avez pas correctement effacé le floats - ajouter overflow: hidden à bodyText ou ajouter une after élément qui utilise clear: left:

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

Voir la démo ci-dessous:

@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>

Source

2017-08-24 09:06:51 kukkuz

 Questions connexes

  • Aucun problème connexe^_^