Flexbox：使内联组件扩展父容器的整个宽度

Question

我从别人那里继承了这个项目，一开始我不会这样设置的，但我有这个组件list-item-component:

<!--  These are for the glyph chevrons-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="row">
    <div class="col-lg-6 item" *ngFor="let item of pageOfItems; let i = index">
        <div class="well col-sm" (click)="showDetails(i)" [ngClass]="{'expanded': i === index}">
            <div>
                <span *ngIf="i !== index" id="spTitleGlyphRow#row#Col1" class="glyphicon glyphicon-chevron-right programTitleGlyph" aria-hidden="true"> </span>
                <span *ngIf="i === index" id="spTitleGlyphRow#row#Col2" class="glyphicon glyphicon-chevron-down programTitleGlyph" aria-hidden="true"> </span>
                <span id="spTitleRow#row#Col1" class="programTitle">{{item.programName}}</span>
            </div>
            <div *ngIf="i === index" id="dvProgramContentRow">
                <div class="programInformation">
                    <p>{{item.description}}</p>
                </div>
                <div class="programContact">
                    <b>Contact:</b> {{item.fullName}}<br />
                    <b>Email:</b>   {{item.email}}<br />
                    <b>Phone:</b>   {{item.phone}}<br />
                    <b>Sector:</b> {{item.baseLocation}}
                    <br /><br />
                    <a href="{{item.website}}" target="_blank" class="btn btn-md btn-warning" role="button">Visit Site</a>
                    &nbsp;
                    <button (click)="showMap(item.streetAddress)" class="btn btn-md btn-primary" role="button" [disabled]="item.streetAddress == 'na' || item.streetAddress == ''">Location</button>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <app-pagination
    [items]="list"
    (changePage)="onChangePage($event)"
    [pageSize] = "selectedOption"
    [renderPage] = "renderPage"
    ></app-pagination>
</div>

这是页面的css：

.well {
    display: inline-block;
    background-color: #f5f5f5;
    padding: 30px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin-top: 5px;
    cursor: pointer;
    #dvProgramContentRow{
        display: flex;
        margin-left: 10px;
        .programInformation{
            flex: 2;
        }
        .programContact{
            flex: 1;
        }
    }
}
.expanded {
    background-color: #4B494C;
    color: white;
}
.item {
    padding: 5px;
}
.glyphicon{
  margin-right: 5px;
}

这是使用这些列表项的列表：

<div class="container">
    <div class="row well jhuBlue" >
        <div class="col-sm-6 col-md-6 col-lg-8 color-blue">
            <span class="CategoryHeader" *ngIf="list">{{list[0].categoryName}} - Program Names & Details</span>
        </div>
        <div class="col-sm-3 col-md-3 col-lg-2">
            <span class="CategoryHeader">Show</span>
            <select id="ddlDisplayNumber" [(ngModel)]="selectedOption" name="ddlDisplayNumber">
                <option [ngValue]="listToShow.length">All</option>
                <option [ngValue]=10>10</option>
                <option [ngValue]=15>15</option>
                <option [ngValue]=20>20</option>
            </select>
            <span class="CategoryHeader">Rows</span>
        </div>
        <div id="dvFilterClick" class="col-sm-3 col-md-3 col-lg-2 jhuBlue text-right">
            <span class="spFilterBy CategoryHeader" (click)="openFilter()">Filter By<img src="../../../assets/images/white-down-arrow-png-2.png" height="27px" width="27px"></span>
        </div>
    </div>
<!--    <app-filter *ngIf="showFilter"-->
<!--        (selectedLocations)="filterByLocation($event)"-->
<!--    ></app-filter>-->
  <div *ngIf="showFilter" id="dvFilterByRow" class="row">
    <div class="col-lg-12">
      <div id="dvFilterByContentRow" class="well dvFilterByContent">
        <div id="dvFilterByProgramContentRow" style="margin-left: 10px">
          <span style="font-size:1.2em"><b>LOCATIONS</b></span>
          <br /><br />
          <table class="clsLocationTable">
            <tr>
              <td>
                <input type="checkbox" (change)="onCheckChange($event)" id="cklnbv" name="cklnbv" [value]="1">
                <label for="cklnbv">Bayview and surrounding areas</label>
              </td>
              <td>
                <input type="checkbox" (change)="onCheckChange($event)" id="cklnshe" name="cklnshe" value="4">
                <label for="cklnshe">Harbor East</label>
              </td>
              <td>
                <input type="checkbox" (change)="onCheckChange($event)" id="cklnwmtw" name="cklnwmtw" value="7">
                <label for="cklnwmtw">Mt. Washington</label>
              </td>
            </tr>
            <tr>
              <td>
                <input type="checkbox" (change)="onCheckChange($event)" id="cklnsnhdcw" name="cklnsnhdcw" value="2">
                <label for="cklnsnhdcw">City-wide</label>
              </td>
              <td>
                <input type="checkbox" (change)="onCheckChange($event)" id="cklnsnhd" name="cklnsnhd" value="5">
                <label for="cklnsnhd">Homewood and surrounding areas</label>
              </td>
              <td>
                <input type="checkbox" (change)="onCheckChange($event)" id="cklnsn" name="cklnsn" value="8">
                <label for="cklnsn">Station North</label>
              </td>
            </tr>
            <tr>
              <td>
                <input type="checkbox" (change)="onCheckChange($event)" id="cklneb" name="cklneb" value="3">
                <label for="cklneb">East Baltimore</label>
              </td>
              <td>
                <input type="checkbox" (change)="onCheckChange($event)" id="cklnmtvn" name="cklnmtvn" value="6">
                <label for="cklnmtvn">Mt. Vernon</label>
              </td>
              <td>&nbsp;
              </td>
            </tr>
          </table>
          <input id="btnFilter" name="btnFilter" type="submit" value="Filter" (click)="onFilterSubmit()">
        </div>
      </div>
    </div>
  </div>

    <app-list-item *ngIf="list"
        [list] = "listToShow"
        [selectedOption] = "selectedOption"
    ></app-list-item>
</div>

和 css:

.jhuBlue {
    background-color: #005eb8;
}

.well {
    padding: 30px;
}

.CategoryHeader {
  color: white;
}

.spFilterBy {
    cursor: pointer;
}

#dvFilterByRow {
  margin-bottom: 5px;
  padding: 30px;
  overflow: hidden;
  background-color: #D3D3D3;
}

这是当前行为：

如果您需要 .ts，这是唯一相关的代码：

  showDetails(index) {
    if (index === this.index) {
      this.index = -1;
    }else{
      this.index = index;
    }
  }

我需要做的是让扩展的黑色区域 div dvProgramContentRow 占据整行。因此，我不想将下一行向下推以提供更多空间，而是只想覆盖其左侧的元素，或者如果您单击左侧，则展开以覆盖右侧的项目。所以基本上是横向扩展而不是纵向扩展。像这样：

如何更改我必须实现的样式？

Answer 1

如果可能，您可以将箭头按钮更改为隐藏的复选框元素以将其用作切换按钮。然后做这样的事情：

.checkbox:checked ~ .allOtherCols {
  display: none; // or hide it however you want really
}

然后您可以将选中的 div 增加 100%。

Answer 2

我们可以使用内置的 HTML 元素 <details>。我没用过你的类。以整页模式查看输出。

:root {
  --margin: 5px;
}

* {
  box-sizing: border-box;
}

.container {
  width: 100%;
  border: 1px dashed gray;
  padding: 5px;
}

.wrapper {
  display: inline-block;
  width: calc(50% - var(--margin) * 2.5);
  margin: var(--margin);
  padding: var(--margin);
}

details {
  background-color: #eee;
  padding: var(--margin);
}

.wrapper:nth-child(even)>details[open] {
  width: calc(200% + var(--margin) * 2.5);
  background-color: rgb(30, 12, 12);
  color: white;
  z-index: 100;
  transform: translateX(calc(-50% - var(--margin) * 2.5));
}

.wrapper:nth-child(odd)>details[open] {
  width: calc(200% + var(--margin) * 2.5);
  background-color: rgb(30, 12, 12);
  color: white;
  z-index: 100;
  position: sticky;
}

summary {
  cursor: pointer;
}

<div class="container">
  <div class="wrapper">
    <details>
      <summary>One</summary>
      <p>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laborum cupiditate perspiciatis, dolorem sequi delectus nemo eum iusto qui explicabo commodi eveniet quod aliquam totam enim reiciendis fugiat tenetur temporibus? Eveniet.
      </p>
    </details>
  </div>
  <div class="wrapper">
    <details>
      <summary>Two</summary>
      <p>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laborum cupiditate perspiciatis, dolorem sequi delectus nemo eum iusto qui explicabo commodi eveniet quod aliquam totam enim reiciendis fugiat tenetur temporibus? Eveniet.
      </p>
    </details>
  </div>

  <div class="wrapper">
    <details>
      <summary>Three</summary>
      <p>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laborum cupiditate perspiciatis, dolorem sequi delectus nemo eum iusto qui explicabo commodi eveniet quod aliquam totam enim reiciendis fugiat tenetur temporibus? Eveniet.
      </p>
    </details>
  </div>
  <div class="wrapper">
    <details>
      <summary>Four</summary>
      <p>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laborum cupiditate perspiciatis, dolorem sequi delectus nemo eum iusto qui explicabo commodi eveniet quod aliquam totam enim reiciendis fugiat tenetur temporibus? Eveniet.
      </p>
    </details>
  </div>
</div>

覆盖同一行上的元素使其无法访问。用户必须先缩小展开的元素才能看到同一行上的其他元素。我们可以扩展元素以占据整行：

* {
  box-sizing: border-box;
}

.container {
  width: 100%;
  border: 1px dashed gray;
  padding: 5px;
}

details {
  display: inline-block;
  width: calc(50% - 13px);
  background-color: #eee;
  margin: 5px;
  padding: 5px;
}

details[open] {
  width: 100%;
  background-color: rgb(30, 12, 12);
  color: white;
}

summary {
  cursor: pointer;
}

<div class="container">
  <details>
    <summary>One</summary>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laborum cupiditate perspiciatis, dolorem sequi delectus nemo eum iusto qui explicabo commodi eveniet quod aliquam totam enim reiciendis fugiat tenetur temporibus? Eveniet.</p>
  </details>
  <details>
    <summary>Two</summary>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laborum cupiditate perspiciatis.
    </p>
  </details>
  <details>
    <summary>Three</summary>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laborum cupiditate perspiciatis.
    </p>
  </details>
  <details>
    <summary>Four</summary>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laborum cupiditate perspiciatis. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laborum cupiditate perspiciatis.</p>
  </details>
</div>

Flexbox：使内联组件扩展父容器的整个宽度

Flexbox: Making an inline component expand the full width of the the parent container

html

css

flexbox

typescript

angular