div的大小取决于其中的文字

时间：2017-08-13 22:19:42

标签： html css

所以我试图为论坛制作某种评论系统。有两个div，一个是评论作者，另一个是评论内容。我希望整个注释div根据注释内容div中的文本数量来改变高度，但是如果我尝试将注释的高度设置为auto，它就不会那样工作，底部边框消失，评论作者div没有达到新的高度。

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：1)

从height删除.comment设置（以此height: auto方式设置）并向其添加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>

答案 1 :(得分：0)

只需移除高度，在它下面说高度为300px，然后将其移除。

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

然后，您需要使用代码将comment_author和comment_content设置为相等的高度

将此添加到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才能顺便使用......

答案 2 :(得分：0)

尝试以下代码。通过设置.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>

相关问题
最新问题