为什么 div 比它的内容更宽？答案

【问题标题】：Why is the div wider than its content?为什么 div 比它的内容更宽？
【发布时间】：2020-08-24 01:34:52
【问题描述】：

我正在尝试创建一个具有 20-60-20 弹性填充布局的页面，但中心的 div 应该占页面的 60%，它比它的内容更宽，所以它使它的内容看起来像偏心。

home.component.html：

<div fxLayout="row wrap"  fxLayoutGap="20px grid">
  <div *ngFor="let data of DUMMY_DATA">
    <mat-card class="example-card" >
      <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
      <mat-card-content class="description-max-height">
        <p>
          {{data.description.length > 100 ? data.description.substring(0, 100) + '...' : data.description}}
        </p>
      </mat-card-content>
      <mat-card-actions>
        <button mat-button>LIKE</button>
        <button mat-button>SHARE</button>
      </mat-card-actions>
    </mat-card>
  </div>
</div>

home.component.css：

.example-card {
  width: 250px;
  height: 300px;
}

.description-max-height {
  max-height: 30px;
}

app.component.html：

<mat-toolbar color="primary" style="margin-bottom: 20px">
  <mat-toolbar-row>
    <span>Some title</span>
    <span class="toolbar-spacer"></span>
    <button mat-button color="accent" (click)="openLoginDialog()">Log In</button>
    <button mat-button color="accent" (click)="openSignupDialog()">Register</button>
  </mat-toolbar-row>
</mat-toolbar>
<div fxLayout="row">
  <div fxFlex="20"></div>
  <router-outlet fxFlex="60"></router-outlet>
  <div fxFlex="20"></div>
</div>

app.compoenent.css：

.toolbar-spacer {
  flex: 1 1 auto;
}

我怎样才能实现这一点，以便在页面中心显示 home.component.html 而不会比它的内容更宽？

您可以找到 Stackblitz 示例 here

【问题讨论】：

你可以创建 stackblitz 示例吗？
@pc_coder 我添加了一个 Stackblitz 示例
我没有看到任何问题，它是 60% 你的下一个图像不适合所以下去然后你看到这个空区域吗？你想要什么结果？

标签： html css angular angular-flex-layout

【解决方案1】：

router-outlet 不是容器。路由到router-outlet 的所有内容都呈现为兄弟节点，而不是插座的子节点。所以你应该用 60% 宽度的 div 包裹 router-outlet。

Stackblitz demo

<div fxLayout="row">
  <div fxFlex="20"></div>
  <div fxFlex="60">
    <router-outlet></router-outlet>
  </div>
  <div fxFlex="20"></div>
</div>

【讨论】：

【解决方案2】：

将fxLayoutAlign="centre" 添加到home-component.html 中的fxLayout div（顶级div）应该对齐容器中心的项目/卡片。

<div fxLayout="row wrap"  fxLayoutGap="20px grid" fxLayoutAlign="center">

【讨论】：