javascript - div 内的 div 不遵守边距并隐藏孩子

Question

我有一个页面，可以在其中显示 div 内的一系列作业。一个父 div 包含两个子 div。一个用于文本描述，占容器的 80%，另一个占容器的 20%。右边有公司的图片和底部的两个按钮，用于保存和查看更多内容。然而，在一个 div 中，按钮正在接触容器的线，而在第二个 div 中，它移动得更高。此外，对于第一个包含描述的子 div，我想要一个固定大小的文本，任何其他溢出应该像.....

但是，它没有发生，并且在一个 div 中，文本覆盖了未显示的按钮。此外，每当我点击保存时，它都会滚动到顶部:((

请问如何正确格式化？谢谢

这是我的代码片段

.internship_posting {
  margin-top: 20px;
  border-radius: 5px;
  border: 1px solid #00468c;
  margin-bottom: 20px;
  padding: 20px;
  max-height: 250px;
  overflow: hidden;
  position: relative;
}

.internship_desc p {
  white-space: nowrap;
  width: calc(70%);
  overflow: hidden;
  text-overflow: ellipsis;
}

.content_for_right {
  float: right;
  list-style: none;
  align-items: center;
  display: flex;
  justify-content: center;
  width: 20%;
}

.content_for_right a.save {
  color: #00000030;
  font-size: 2.5em;
  margin: auto;
  margin-right: 10px;
}

.heart i.fa-heart {
  color: #f44336;
}

.heart {
  animation: heart 0.5s linear;
}

div a.btn:hover {
  color: rgb(93, 129, 177)
}

div a.btn:active {
  background-color: rgb(99, 175, 226);
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

@keyframes heart {
  0% {
    transform: rotate(0deg) scale(1.7);
  }
  40% {
    transform: rotate(0deg) scale(1);
  }
  41% {
    transform: rotate(360deg) scale(1);
  }
  100% {
    transform: rotate(0deg) scale(1);
  }
}


<div class="container">
  <div class="row">
    <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12" style="width: 100%;">
      <h2 style="margin-top: 20px; color: #00468c; text-align: 
      center;">Showing internships for {{ industry_type.industry_name }}</h2>
          {% for internship, recruiter in posts %}
              <div class="internship_posting">
              <img style="float:right" src="{{ recruiter.company_picture.url 
              }}" width="80" height=auto alt="">
              <div style="padding:20px; overflow:hidden; width: 80%;">
              <h4 style="color: black;"><strong>{{internship.internship_title 
              }} 
              <p><span style="color: black;">Start Date: </span>{{ 
              internship.start_date }} <span style="color: 
              black;">&nbsp;&nbsp;End Date: </span>{{ internship.end_date } 
              </p>
              <div class="internship_desc;">
                 <p>{{ internship.internship_desc | safe}}</p>
              </div>  
             </div>

             <div class="content_for_right">
                <a href="#" class="save" style="display: inline-block;">
                  <i class="fa fa-heart" aria-hidden="true"></i>
                </a>
                <a style= "color:white; background-color:#23c0e9;" class="btn 
                button" href="{% url 'view_details' internship.id %}"> 
                <strong>View More>></strong></a>
              </div>
            </div>
      {% endfor %}
    </div>

标签： javascripthtmlcssdjangodjango-templates