您的位置: 首页  >  技术问答  >  div的大小取决于它里面的文字

div的大小取决于它里面的文字

分类: 技术问答 • 2022-04-14 20:58:42

div的大小取决于它里面的文字

问题描述：

所以我试图为论坛制作某种评论系统。有两个div，一个是评论作者，另一个评论内容。我希望整个评论div根据评论内容div中的文本数量来改变高度，但是如果我尝试将评论的高度设置为auto，则它不会以这种方式工作，底部边框消失并且评论作者div没有获得新的高度。div的大小取决于它里面的文字

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>

答

从.comment（使它height: auto这样）删除height设置并添加background-color: #FFE5CC; overflow: auto;将其覆盖与背景颜色的框的左侧全列：

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>

+0

非常感谢你！ – ewn

答

只需卸下高度，在它下面说高度300像素，只是将其删除。

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

然后，您需要的代码到COMMENT_AUTHOR和COMMENT_CONTENT设定为等于hights

一下添加到一个javascript并将其包含在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); 
     }   

    }); 

});

然后替换这些

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

你需要JQuery为此工作的方式...

答

请尝试下面的代码。通过设置.comment左侧的背景颜色，它将看起来像左侧与右侧具有相同的高度。

右侧现在有一个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>

相关推荐