Question

我正在尝试将文本放在图像的侧面，但是我不知道为什么我的图像div占用了多余的空间

  public downloadPDF() {
 let doc = jsPDF();

  let specialElementHandlers = {
    '#editor': function (element, renderer) {
      return true;
    }
  };

  let content = this.content.nativeElement;
  doc.
  doc.fromHTML(content.innerHTML, 15, 15, {
    'width': 190,
    'elementHandlers': specialElementHandlers
  });

  doc.save('informatiescherm.pdf');

.row {
  display: flex;
  flex-direction: row;
}

.round img {
  height: 15%;
  width: 15%;
  border-radius: 100%;
  margin: 10px;
}

.round{
  padding: 0 !important;
  text-align: left;
  justify-content: left;
  height: 10%;
}

请帮助我。

Answer 1

您需要在.round类中而不是img中定义css，并在img css中添加width:100%。

默认情况下，它是在Flexbox中分发以调整空间。

.row {
  display: flex;
  flex-direction: row;
}

.round {
  height: 15%;
  width: 15%;  
  margin: 10px;
  padding: 0 !important;
  text-align: left;
  justify-content: left; 
}

.round img {
  width:100%;
  border-radius: 100%;
}

<div class="row">
    <div class="round">
      <img mat-card-image  src="https://scontent-bom1-1.xx.fbcdn.net/v/t1.0-9/46463461_1157513267757941_7425556584253620224_n.jpg?_nc_cat=100&_nc_ht=scontent-bom1-1.xx&oh=3f957c2a41da24c5f0c505d61241fba5&oe=5C7550A3" alt="Card image cap">
    </div>
    <div>
      <p><a routerLink="#">Rupesh Yadav</a></p>
      <p><i>April,12,2018</i></p>
    </div>
</div>

或者您也可以在图像中以像素为单位添加宽度，这也可以：

.row {
  display: flex;
  flex-direction: row;
}

.round img {
  width: 150px;  
  margin: 10px;
  border-radius: 100%;
}

<div class="row">
    <div class="round">
      <img mat-card-image  src="https://scontent-bom1-1.xx.fbcdn.net/v/t1.0-9/46463461_1157513267757941_7425556584253620224_n.jpg?_nc_cat=100&_nc_ht=scontent-bom1-1.xx&oh=3f957c2a41da24c5f0c505d61241fba5&oe=5C7550A3" alt="Card image cap">
    </div>
    <div>
      <p><a routerLink="#">Rupesh Yadav</a></p>
      <p><i>April,12,2018</i></p>
    </div>
</div>

Answer 2

您使用display flex属性作为行，但未使用flex列大小，请尝试以下示例，希望对您有所帮助。

.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    position: relative;
    z-index: 99999;
}

.round {
    padding: 0 !important;
    text-align: left;
    -webkit-box-pack: left;
    -ms-flex-pack: left;
    justify-content: left;
    height: 100px;
    width: 100px;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100px;
    flex: 0 0 100px;
}

.round img {
    height: 100px;
    width: 100px;
    border-radius: 50%;
    margin: 10px;

}

为什么div占用额外的图像空间？

2 个答案: