taille de div en fonction du texte à l'intérieur

Donc j'essaye de faire une sorte de système de commentaire pour un forum. Il y a deux divs, l'un est l'auteur du commentaire, l'autre le contenu du commentaire. Je souhaite que l'ensemble du commentaire div change de hauteur en fonction de la quantité de texte dans le contenu du commentaire div, mais si j'essaie de définir la hauteur du commentaire sur auto, ça ne fonctionne pas comme ça, la bordure inférieure disparaît et l'auteur du commentaire div ne prend pas une nouvelle hauteur.taille de div en fonction du texte à l'intérieur

body{ 
 
    padding: 0; 
 
    margin: 0; 
 
    font-family: Arial; 
 
} 
 
.discussion{ 
 
    width: 60%; 
 
    margin: auto; 
 
} 
 
/* LINE */ 
 
.line{ 
 
    width: 100%; 
 
    height: 50px; 
 
    background-color: #FF9933; 
 
    margin: auto; 
 
} 
 
/* COMMENT */ 
 
.comment{ 
 
    width: 100%; 
 
    height: 300px; 
 
    margin: auto; 
 
    border-top: solid 2px ; 
 
    border-bottom: solid 2px; 
 
    border-color: #606060; 
 
} 
 
.comment_author{ 
 
    width: 20%; 
 
    height: 100%; 
 
    background-color: #FFE5CC; 
 
    float: left; 
 
} 
 
.comment_author_name{ 
 
    text-align: center; 
 
    font-size: 16px; 
 
    font-weight: bold; 
 
    width: 100%; 
 
    height: 20px; 
 
    border-bottom: dashed 1px; 
 
    border-color: #606060; 
 
    padding: 6px 0px 6px 0px; 
 
} 
 
.comment_author_picture{ 
 
    height: 150px; 
 
    width: 150px; 
 
    margin: auto; 
 
    margin-top: 30px; 
 
    background-image: url(images/super.png); 
 
    background-position: center; 
 
    background-size: cover; 
 
    border: solid 1px; 
 
    border-color: #E0E0E0; 
 
} 
 
.comment_author_rank{ 
 
    width: 100%; 
 
    height: 15px; 
 
    font-size: 11px; 
 
    text-align: center; 
 
    margin-top: 10px; 
 
} 
 
.comment_content{ 
 
    width: 80%; 
 
    height: 100%; 
 
    background-color: #FFCC99; 
 
    float: right; 
 
} 
 
.comment_date{ 
 
    width: 100% 
 
    height: 15px; 
 
    font-size: 14px; 
 
    text-align: left; 
 
    padding: 8px 0px 8px 0px; 
 
    border-color: #606060; 
 
} 
 
.comment_date span{ 
 
    float: right; 
 
    margin-right: 2%; 
 
    border-bottom: dashed 1px #606060; 
 
} 
 
.comment_message{ 
 
    margin-left: 2%; 
 
    margin-right: 2%; 
 
    margin-top: 20px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <link href="css/style.css" rel="stylesheet"> 
 
    <title>A discussion</title> 
 
    </head> 
 
    <body> 
 
    <div class="content"> 
 
     <div class="discussion"> 
 
     <div class="line"> 
 
     </div> 
 
     <div class="comment"> 
 
      <div class="comment_author"> 
 
      <div class="comment_author_name"> 
 
       Jurgis 
 
      </div> 
 
      <div class="comment_author_picture"> 
 
      </div> 
 
      <div class="comment_author_rank"> 
 
       Pro 
 
      </div> 
 
      </div> 
 
      <div class="comment_content"> 
 
      <div class="comment_date"> 
 
       <span>2017-08-13 23:45:23</span> 
 
      </div> 
 
      <div class="comment_message"> 
 
       Lorem ipsum (trump. lipsum) yra tekstas naudojamas spaudos ir grafinio dizaino industrijoje jau nuo XVI amžiaus pradžios. 
 
       Jis naudojamas parodyti grafinio pristatymo elementus, tokius kaip tipografija, dizainas ar šriftas. 
 
       Jis taip pat kūrimo stadijoje naudojamas kaip kai kurių produktų aprašymų tekstas, prieš tai kai įrašomas tikrasis tekstas. 
 
       Lorem ipsum (trump. lipsum) yra tekstas naudojamas spaudos ir grafinio dizaino industrijoje jau nuo XVI amžiaus pradžios. 
 
       Jis naudojamas parodyti grafinio pristatymo elementus, tokius kaip tipografija, dizainas ar šriftas. 
 
       Jis taip pat kūrimo stadijoje naudojamas kaip kai kurių produktų aprašymų tekstas, prieš tai kai įrašomas tikrasis tekstas. 
 
       Lorem ipsum (trump. lipsum) yra tekstas naudojamas spaudos ir grafinio dizaino industrijoje jau nuo XVI amžiaus pradžios. 
 
       Jis naudojamas parodyti grafinio pristatymo elementus, tokius kaip tipografija, dizainas ar šriftas. 
 
       Jis taip pat kūrimo stadijoje naudojamas kaip kai kurių produktų aprašymų tekstas, prieš tai kai įrašomas tikrasis tekstas. 
 
       Lorem ipsum (trump. lipsum) yra tekstas naudojamas spaudos ir grafinio dizaino industrijoje jau nuo XVI amžiaus pradžios. 
 
       Jis naudojamas parodyti grafinio pristatymo elementus, tokius kaip tipografija, dizainas ar šriftas. 
 
       Jis taip pat kūrimo stadijoje naudojamas kaip kai kurių produktų aprašymų tekstas, prieš tai kai įrašomas tikrasis tekstas. 
 
       Lorem ipsum (trump. lipsum) yra tekstas naudojamas spaudos ir grafinio dizaino industrijoje jau nuo XVI amžiaus pradžios. 
 
       Jis naudojamas parodyti grafinio pristatymo elementus, tokius kaip tipografija, dizainas ar šriftas. 
 
       Jis taip pat kūrimo stadijoje naudojamas kaip kai kurių produktų aprašymų tekstas, prieš tai kai įrašomas tikrasis tekstas. 
 
       Lorem ipsum (trump. lipsum) yra tekstas naudojamas spaudos ir grafinio dizaino industrijoje jau nuo XVI amžiaus pradžios. 
 
       Jis naudojamas parodyti grafinio pristatymo elementus, tokius kaip tipografija, dizainas ar šriftas. 
 
       Jis taip pat kūrimo stadijoje naudojamas kaip kai kurių produktų aprašymų tekstas, prieš tai kai įrašomas tikrasis tekstas. 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </body> 
 
</html>

Source

2017-08-13 ewn

Supprimer le réglage height de .comment (ce qui en fait height: auto cette façon) et ajouter background-color: #FFE5CC; overflow: auto; à elle pour couvrir toute la colonne gauche de la boîte avec la couleur de fond:

body{ 
 
    padding: 0; 
 
    margin: 0; 
 
    font-family: Arial; 
 
} 
 
.discussion{ 
 
    width: 60%; 
 
    margin: auto; 
 
} 
 
/* LINE */ 
 
.line{ 
 
    width: 100%; 
 
    height: 50px; 
 
    background-color: #FF9933; 
 
    margin: auto; 
 
    } 
 
/* COMMENT */ 
 
.comment{ 
 
    width: 100%; 
 
    margin: auto; 
 
    border-top: solid 2px ; 
 
    border-bottom: solid 2px; 
 
    border-color: #606060; 
 
    background-color: #FFE5CC; 
 
    overflow: auto; 
 
} 
 
.comment_author{ 
 
    width: 20%; 
 
    height: 100%; 
 
    background-color: #FFE5CC; 
 
    float: left; 
 
} 
 
.comment_author_name{ 
 
    text-align: center; 
 
    font-size: 16px; 
 
    font-weight: bold; 
 
    width: 100%; 
 
    height: 20px; 
 
    border-bottom: dashed 1px; 
 
    border-color: #606060; 
 
    padding: 6px 0px 6px 0px; 
 
} 
 
.comment_author_picture{ 
 
    height: 150px; 
 
    width: 150px; 
 
    margin: auto; 
 
    margin-top: 30px; 
 
    background-image: url(images/super.png); 
 
    background-position: center; 
 
    background-size: cover; 
 
    border: solid 1px; 
 
    border-color: #E0E0E0; 
 
} 
 
.comment_author_rank{ 
 
    width: 100%; 
 
    height: 15px; 
 
    font-size: 11px; 
 
    text-align: center; 
 
    margin-top: 10px; 
 
} 
 
.comment_content{ 
 
    width: 80%; 
 
    height: 100%; 
 
    background-color: #FFCC99; 
 
    float: right; 
 
} 
 
.comment_date{ 
 
    width: 100% 
 
    height: 15px; 
 
    font-size: 14px; 
 
    text-align: left; 
 
    padding: 8px 0px 8px 0px; 
 
    border-color: #606060; 
 
} 
 
.comment_date span{ 
 
    float: right; 
 
    margin-right: 2%; 
 
    border-bottom: dashed 1px #606060; 
 
} 
 
.comment_message{ 
 
    margin-left: 2%; 
 
    margin-right: 2%; 
 
    margin-top: 20px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <link href="css/style.css" rel="stylesheet"> 
 
    <title>A discussion</title> 
 
    </head> 
 
    <body> 
 
    <div class="content"> 
 
     <div class="discussion"> 
 
     <div class="line"> 
 
     </div> 
 
     <div class="comment"> 
 
      <div class="comment_author"> 
 
      <div class="comment_author_name"> 
 
       Jurgis 
 
      </div> 
 
      <div class="comment_author_picture"> 
 
      </div> 
 
      <div class="comment_author_rank"> 
 
       Pro 
 
      </div> 
 
      </div> 
 
      <div class="comment_content"> 
 
      <div class="comment_date"> 
 
       <span>2017-08-13 23:45:23</span> 
 
      </div> 
 
      <div class="comment_message"> 
 
       Lorem ipsum (trump. lipsum) yra tekstas naudojamas spaudos ir grafinio dizaino industrijoje jau nuo XVI amžiaus pradžios. 
 
       Jis naudojamas parodyti grafinio pristatymo elementus, tokius kaip tipografija, dizainas ar šriftas. 
 
       Jis taip pat kūrimo stadijoje naudojamas kaip kai kurių produktų aprašymų tekstas, prieš tai kai įrašomas tikrasis tekstas. 
 
       Lorem ipsum (trump. lipsum) yra tekstas naudojamas spaudos ir grafinio dizaino industrijoje jau nuo XVI amžiaus pradžios. 
 
       Jis naudojamas parodyti grafinio pristatymo elementus, tokius kaip tipografija, dizainas ar šriftas. 
 
       Jis taip pat kūrimo stadijoje naudojamas kaip kai kurių produktų aprašymų tekstas, prieš tai kai įrašomas tikrasis tekstas. 
 
       Lorem ipsum (trump. lipsum) yra tekstas naudojamas spaudos ir grafinio dizaino industrijoje jau nuo XVI amžiaus pradžios. 
 
       Jis naudojamas parodyti grafinio pristatymo elementus, tokius kaip tipografija, dizainas ar šriftas. 
 
       Jis taip pat kūrimo stadijoje naudojamas kaip kai kurių produktų aprašymų tekstas, prieš tai kai įrašomas tikrasis tekstas. 
 
       Lorem ipsum (trump. lipsum) yra tekstas naudojamas spaudos ir grafinio dizaino industrijoje jau nuo XVI amžiaus pradžios. 
 
       Jis naudojamas parodyti grafinio pristatymo elementus, tokius kaip tipografija, dizainas ar šriftas. 
 
       Jis taip pat kūrimo stadijoje naudojamas kaip kai kurių produktų aprašymų tekstas, prieš tai kai įrašomas tikrasis tekstas. 
 
       Lorem ipsum (trump. lipsum) yra tekstas naudojamas spaudos ir grafinio dizaino industrijoje jau nuo XVI amžiaus pradžios. 
 
       Jis naudojamas parodyti grafinio pristatymo elementus, tokius kaip tipografija, dizainas ar šriftas. 
 
       Jis taip pat kūrimo stadijoje naudojamas kaip kai kurių produktų aprašymų tekstas, prieš tai kai įrašomas tikrasis tekstas. 
 
       Lorem ipsum (trump. lipsum) yra tekstas naudojamas spaudos ir grafinio dizaino industrijoje jau nuo XVI amžiaus pradžios. 
 
       Jis naudojamas parodyti grafinio pristatymo elementus, tokius kaip tipografija, dizainas ar šriftas. 
 
       Jis taip pat kūrimo stadijoje naudojamas kaip kai kurių produktų aprašymų tekstas, prieš tai kai įrašomas tikrasis tekstas. 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </body> 
 
</html>

Source

2017-08-13 22:29:16 Johannes

merci beaucoup! – ewn

enlever seulement leur hauteur, en dessous ladite hauteur 300px, retirez-le.

.comment{ 
    width: 100%; 
    height: 300px; 
    margin: auto; 
    border-top: solid 2px ; 
    border-bottom: solid 2px; 
    border-color: #606060; 
}

Vous Code devez ensuite définir le COMMENT_AUTHOR et COMMENT_CONTENT à hights égales

Ajouter à un javascript et l'inclure dans votre fichier html

var currentTallest = 0, 
    currentRowStart = 0, 
    rowDivs = new Array(), 
    $el, 
    topPosition = 0; 

$(document).ready(function(){ 

    $('.commonClassName').each(function(){ 

     $el = $(this); 
     topPostion = $el.position().top; 

     if (currentRowStart != topPostion) { 

     // we just came to a new row. Set all the heights on the completed row 
     for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) { 
      rowDivs[currentDiv].height(currentTallest); 
     } 

     // set the variables for the new row 
     rowDivs.length = 0; // empty the array 
     currentRowStart = topPostion; 
     currentTallest = $el.height(); 
     rowDivs.push($el); 

     } else { 

     // another div on the current row. Add it to the list and check if it's taller 
     rowDivs.push($el); 
     currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest); 

     } 

     // do the last row 
     for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) { 
     rowDivs[currentDiv].height(currentTallest); 
     }   

    }); 

});

remplacent alors ces

<div class="comment_content commonClassName"> 
<div class="comment_author commonClassName">

Vous avez besoin de JQuery pour que cela fonctionne ...

Source

2017-08-13 22:26:02 Frost

Essayez le code suivant. En définissant la couleur d'arrière-plan du côté gauche sur le .comment, il semblera que le côté gauche a la même hauteur que le côté droit. Le côté droit a maintenant un display: inline-block.

body{ 
 
    padding: 0; 
 
    margin: 0; 
 
    font-family: Arial; 
 
} 
 
.discussion{ 
 
    width: 60%; 
 
    margin: auto; 
 
} 
 
/* LINE */ 
 
.line{ 
 
    width: 100%; 
 
    height: 50px; 
 
    background-color: #FF9933; 
 
    margin: auto; 
 
} 
 
/* COMMENT */ 
 
.comment{ 
 
    width: 100%; 
 
    /*height: 300px; not needed */ 
 
    margin: auto; 
 
    border-top: solid 2px ; 
 
    border-bottom: solid 2px; 
 
    border-color: #606060; 
 
    display: inline-block; 
 
    background-color: #FFE5CC; 
 
} 
 
.comment_author{ 
 
    width: 20%; 
 
    height: 100%; 
 
    float: left; 
 
} 
 
.comment_author_name{ 
 
    text-align: center; 
 
    font-size: 16px; 
 
    font-weight: bold; 
 
    width: 100%; 
 
    height: 20px; 
 
    border-bottom: dashed 1px; 
 
    border-color: #606060; 
 
    padding: 6px 0px 6px 0px; 
 
} 
 
.comment_author_picture{ 
 
    height: 150px; 
 
    width: 150px; 
 
    margin: auto; 
 
    margin-top: 30px; 
 
    background-image: url(images/super.png); 
 
    background-position: center; 
 
    background-size: cover; 
 
    border: solid 1px; 
 
    border-color: #E0E0E0; 
 
} 
 
.comment_author_rank{ 
 
    width: 100%; 
 
    height: 15px; 
 
    font-size: 11px; 
 
    text-align: center; 
 
    margin-top: 10px; 
 
} 
 
.comment_content{ 
 
    width: 80%; 
 
    height: 100%; 
 
    background-color: #FFCC99; 
 
    float: right; 
 
} 
 
.comment_date{ 
 
    width: 100% 
 
    height: 15px; 
 
    font-size: 14px; 
 
    text-align: left; 
 
    padding: 8px 0px 8px 0px; 
 
    border-color: #606060; 
 
} 
 
.comment_date span{ 
 
    float: right; 
 
    margin-right: 2%; 
 
    border-bottom: dashed 1px #606060; 
 
} 
 
.comment_message{ 
 
    margin-left: 2%; 
 
    margin-right: 2%; 
 
    margin-top: 20px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <link href="css/style.css" rel="stylesheet"> 
 
    <title>A discussion</title> 
 
    </head> 
 
    <body> 
 
    <div class="content"> 
 
     <div class="discussion"> 
 
     <div class="line"> 
 
     </div> 
 
     <div class="comment"> 
 
      <div class="comment_author"> 
 
      <div class="comment_author_name"> 
 
       Jurgis 
 
      </div> 
 
      <div class="comment_author_picture"> 
 
      </div> 
 
      <div class="comment_author_rank"> 
 
       Pro 
 
      </div> 
 
      </div> 
 
      <div class="comment_content"> 
 
      <div class="comment_date"> 
 
       <span>2017-08-13 23:45:23</span> 
 
      </div> 
 
      <div class="comment_message"> 
 
       Lorem ipsum (trump. lipsum) yra tekstas naudojamas spaudos ir grafinio dizaino industrijoje jau nuo XVI amžiaus pradžios. 
 
       Jis naudojamas parodyti grafinio pristatymo elementus, tokius kaip tipografija, dizainas ar šriftas. 
 
       Jis taip pat kūrimo stadijoje naudojamas kaip kai kurių produktų aprašymų tekstas, prieš tai kai įrašomas tikrasis tekstas. 
 
       Lorem ipsum (trump. lipsum) yra tekstas naudojamas spaudos ir grafinio dizaino industrijoje jau nuo XVI amžiaus pradžios. 
 
       Jis naudojamas parodyti grafinio pristatymo elementus, tokius kaip tipografija, dizainas ar šriftas. 
 
       Jis taip pat kūrimo stadijoje naudojamas kaip kai kurių produktų aprašymų tekstas, prieš tai kai įrašomas tikrasis tekstas. 
 
       Lorem ipsum (trump. lipsum) yra tekstas naudojamas spaudos ir grafinio dizaino industrijoje jau nuo XVI amžiaus pradžios. 
 
       Jis naudojamas parodyti grafinio pristatymo elementus, tokius kaip tipografija, dizainas ar šriftas. 
 
       Jis taip pat kūrimo stadijoje naudojamas kaip kai kurių produktų aprašymų tekstas, prieš tai kai įrašomas tikrasis tekstas. 
 
       Lorem ipsum (trump. lipsum) yra tekstas naudojamas spaudos ir grafinio dizaino industrijoje jau nuo XVI amžiaus pradžios. 
 
       Jis naudojamas parodyti grafinio pristatymo elementus, tokius kaip tipografija, dizainas ar šriftas. 
 
       Jis taip pat kūrimo stadijoje naudojamas kaip kai kurių produktų aprašymų tekstas, prieš tai kai įrašomas tikrasis tekstas. 
 
       Lorem ipsum (trump. lipsum) yra tekstas naudojamas spaudos ir grafinio dizaino industrijoje jau nuo XVI amžiaus pradžios. 
 
       Jis naudojamas parodyti grafinio pristatymo elementus, tokius kaip tipografija, dizainas ar šriftas. 
 
       Jis taip pat kūrimo stadijoje naudojamas kaip kai kurių produktų aprašymų tekstas, prieš tai kai įrašomas tikrasis tekstas. 
 
       Lorem ipsum (trump. lipsum) yra tekstas naudojamas spaudos ir grafinio dizaino industrijoje jau nuo XVI amžiaus pradžios. 
 
       Jis naudojamas parodyti grafinio pristatymo elementus, tokius kaip tipografija, dizainas ar šriftas. 
 
       Jis taip pat kūrimo stadijoje naudojamas kaip kai kurių produktų aprašymų tekstas, prieš tai kai įrašomas tikrasis tekstas. 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </body> 
 
</html>

Source

2017-08-13 22:28:43 Ruud

taille de div en fonction du texte à l'intérieur

Répondre

Questions connexes