Как я могу сделать так, чтобы высота div динамически соответствовала размеру div, в котором он содержится?

Question

Я использую угловые 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>

Но у меня есть проблема, когда имя действия очень длинное, левая красная полоса не соответствует размеруdiv, в котором он содержится, приводит к смещению данных моей активности влево

Ошибка:

Как я могусделать, чтобы высота div динамически соответствовала размеру div, в котором он содержится?

Answer 1

Нажмите на фрагмент кода запуска, чтобы увидеть, как он работает. Я добавил 2 фрагмента

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. Бонус: многоточие

Вы также можете добавить переполнение текста: многоточие для отображения многоточия в конце текста, если оно переполняется

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

Answer 2

Вместо добавления 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>

Answer 3

Используйте 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>