Question

在chrome中，flex框工作正常，我必须并排排列图像和文本，我使用flex。但在IE中，文字并没有结束。

当我检查需要为子div添加100％的宽度，因为我有一个div为图像和另一个div的内容我应该添加100％的宽度，我尝试另一个解决方案flex：1或flex - 基础：100％都没有工作。

请参阅代码

＆＃13;

.students-section > div:last-child {
  margin-bottom:0;
}

.student-container{
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.student-container .student-left-container .student-img-container {
    width: 120px;
    height:auto;
    margin-right: 10px;
}

.student-container .student-left-container .student-img-container img{
    max-width: 100%;
    max-height: 100%;
}

＆＃13;

<div class="students-section">
<div class="student-container">
  <div class="student-left-container">
    <div class="student-img-container">
      <a target="_blank" href="#">
        <img src="https://studentprivacypledge.org/wp-content/uploads/2016/09/SPP_Pledge_2-1500x900.jpg"/>
      </a>
    </div>
  </div>
  <div class="student-right-container">
    <div class="student-content-container"><p>Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</p><div class="student-description">Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum <a>00:00</a> <a class="check-more" target="_blank" href="#">  Check More</a></div></div>
  </div>
</div>
<div class="student-container">
  <div class="student-left-container">
    <div class="student-img-container">
      <a target="_blank" href="#">
        <img src="https://cdn.pixabay.com/photo/2016/03/07/09/34/kid-1241817_960_720.jpg"/>
      </a>
    </div>
  </div>
  <div class="student-right-container">
    <div class="student-content-container"><p>Lorem Ipsum Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</p><div class="student-description">Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum  <a>00:00</a> <a class="check-more" target="_blank" href="#"> Check More</a></div></div>
  </div>
</div>
</div>

＆＃13;

文本未使用弹性框

0 个答案: