如何使 div 的高度动态适合包含它的 div 的大小？答案

【问题标题】：How can I make the height of the div dynamically fit the size of the div in which it is contained?如何使 div 的高度动态适合包含它的 div 的大小？
【发布时间】：2020-01-30 08:27:15
【问题描述】：

我正在使用 Angular js 在我的视图中显示信息

<div class="col-md-10">
     <div style="height: 140px; width: 7px; float: left; margin-right: 20px"
          ng-style="{'background-color': activity.category.color}">
     </div>
     <h4 style="word-wrap: break-word"><strong>{{ activity.name }}</strong>
     </h4>
     <p><strong>Salón:</strong> {{ activity.place.name }}</p>
     <p>{{ activity.begin_date | date: 'h:mma' }} - {{ activity.end_date | date: 'h:mma' }}</p>
     <p><strong>Fecha de terminación:</strong> {{ activity.end_date | date: 'dd-MM-yyyy' }}</p>
     <p id="{{ activity.id }}_description" class="collapse"
        style="word-wrap: break-word">{{ activity.description }}</p>
</div>

但是我有一个问题，当activity的名字很长的时候，左边的红条不适合它所在的div的大小，这导致我的activity数据向左移动了

错误：

如何使 div 的高度动态适应包含它的 div 的大小？

【问题讨论】：

标签： html css angularjs twitter-bootstrap

【解决方案1】：

使用display: flex; 并排显示内容。这样可以避免使用floats 并设置height

.has-activity {
  display: flex;
}

<div class="col-md-10 has-activity">
  <div style="width: 7px; margin-right: 20px;background: red;" class="red"></div>
  <div>
    <h4 style="word-wrap: break-word"><strong>{{ activity.name }}</strong></h4>
    <p><strong>Salón:</strong> {{ activity.place.name }}</p>
    <p>{{ activity.begin_date | date: 'h:mma' }} - {{ activity.end_date | date: 'h:mma' }}</p>
    <p><strong>Fecha de terminación:</strong> {{ activity.end_date | date: 'dd-MM-yyyy' }}</p>
    <p id="{{ activity.id }}_description" class="collapse" style="word-wrap: break-word">{{ activity.description }}</p>
  </div>
</div>

使用引导

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="row m-4">
  <div class="col-md-10">
    <div class=" d-flex">
      <div style="width: 7px; margin-right: 20px;background: red;" class="red"></div>
      <div>
        <h4 style="word-wrap: break-word"><strong>{{ activity.name }}</strong></h4>
        <p><strong>Salón:</strong> {{ activity.place.name }}</p>
        <p>{{ activity.begin_date | date: 'h:mma' }} - {{ activity.end_date | date: 'h:mma' }}</p>
        <p><strong>Fecha de terminación:</strong> {{ activity.end_date | date: 'dd-MM-yyyy' }}</p>
        <p id="{{ activity.id }}_description" class="collapse" style="word-wrap: break-word">{{ activity.description }}</p>
      </div>
    </div>
  </div>
</div>

【讨论】：

【解决方案2】：

点击运行代码 sn-p 看看它是如何工作的。我添加了 2 个 sn-ps

1。溢出隐藏

您可以使用 max-width: 100% 和 overflow: hidden 属性隐藏溢出的内容。如下图。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<h1><u>Updated</u></h1>
<br/>
<div class="col-md-10">
  <div style="height: 140px; width: 7px; float: left; margin-right: 20px; background-color: red"></div>
  <h4 style="display:block; max-width: 100%; overflow: hidden; white-space: nowrap"><strong>Activity Name Activity Name Activity Name Activity Name Activity Name Activity Name Activity Name Activity Name Activity Name Activity Name Activity Name </strong></h4>
  <p><strong>Salón:</strong> Place Name</p>
  <p>00:24 AM - 00:50 PM</p>
  <p><strong>Fecha de terminación:</strong> 23-Mar-2019</p>
</div>

2。奖金：省略号

您还可以添加 text-overflow: ellipsis 用于在文本溢出时在文本末尾显示省略号

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<h1><u>Bonus</u></h1>
<br/>
<div class="col-md-10">
  <div style="height: 140px; width: 7px; float: left; margin-right: 20px; background-color: red"></div>
  <h4 style="display:block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis"><strong>Activity Name Activity Name Activity Name Activity Name Activity Name Activity Name Activity Name Activity Name Activity Name Activity Name Activity Name </strong></h4>
  <p><strong>Salón:</strong> Place Name</p>
  <p>00:24 AM - 00:50 PM</p>
  <p><strong>Fecha de terminación:</strong> 23-Mar-2019</p>
</div>

【讨论】：

【解决方案3】：

改为添加DIV 和float 为您的外部DIV 添加边框，如下所示。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

    <div class="col-md-10" style="border:0;border-left:7px solid;border-color:red;">
      
      <h4 style="display:block; "><strong>Activity Name Activity Name Activity Name Activity Name Activity Name Activity Name Activity Name Activity Name Activity Name Activity Name Activity Name </strong></h4>
      <p><strong>Salón:</strong> Place Name</p>
      <p>00:24 AM - 00:50 PM</p>
      <p><strong>Fecha de terminación:</strong> 23-Mar-2019</p>
    </div>

【讨论】：