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

Question

我正在使用 angular js 在我的 View 中显示信息

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

但是我有一个问题，当事件的名称很长时，左边的红色条不适合包含它的div的大小，这导致我的事件数据向左移动

错误:

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

Answer 1

而不是添加一个带有 float 的 DIV，向您的外部 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>