javascript - 在左右对齐的每 2 个 div 中放置 4 个 div

Question

我正在为做实验的人开发一个使用 Angular 2 的小应用程序，因此我试图将 4 个 div，每个包含一个图像，放入每 2 个 div 中。

出于某种原因，所有的 div(包含图像)都一个接一个地对齐，而不是一个接一个地对齐，并且在换行的情况下只向下一行。我希望 guesser 和 describer div 适合指定区域:guesser 左侧的垂直分隔线和 describer 位于垂直分隔线的右侧，并且都位于水平分隔线上方，但它们似乎没有填满该区域的宽度，而是垂直溢出超过了水平分隔线。

网站目前的样子

我期望网站的外观(我使用 Paint 编辑了这个，它只是为了演示)

这是我的组件的 HTML 和 CSS:

div.describer {
    text-align: center;
    float: right;
    width: 50%;
    height: 80%;
}

div.describer div.container {
    margin: 1em;
}

div.describer div.container img.blocked {
    padding: 5px;
    border: 5px solid blue;
}

div.describer div.container img.target {
    padding: 5px;
    border: 5px solid red;
}

div.guesser {
    text-align: center;
    float: left;
    width: 50%;
    height: 80%;
}

div.guesser div.container {
    margin: 1em;
}

div.guesser div.container.blocked {
    background-color: black;
    display: inline-block;
}

div.guesser div.container.blocked img.blocked {
    opacity: 0;
}

div.guesser div.container img.selected {
    padding: 5px;
    border: 5px solid red;
    border-radius: 3;
}

div.vertical-divider {
    position: absolute;
    left: 50%;
    top: 10%;
    bottom: 20%;
    border-left: 1px solid gray;
}

hr.horizontal-divider {
    position: absolute;
    left: 5%;
    right: 5%;
    bottom: 19%;
}

div.commands-container {
    position: fixed;
    left: 50%;
    bottom: 10%;
    transform: translate(-50%, 0%);
}

<div class="describer">
    <h3>Describer</h3>
    <div class="container" *ngFor="let icon of icons">
        <img src="assets/icons/{{trialNum+1}}/{{icon}}" [ngClass]="{blocked: icon == blockedIcon, target: icon == targetIcon}">
        <p *ngIf="icon == blockedIcon">Blocked</p>
        <p *ngIf="icon == targetIcon">Target</p>
    </div>
</div>
<div class="vertical-divider"></div>
<div class="guesser">
    <h3>Guesser</h3>
    <div class="container" *ngFor="let icon of icons" [ngClass]="{blocked: icon == blockedIcon}">
        <img src="assets/icons/{{trialNum+1}}/{{icon}}" [ngClass]="{blocked: icon == blockedIcon, selected: icon == selectedIcon}">
    </div>
</div>
<hr class="horizontal-divider">
<div class="commands-container">
    <button (click)="startExperiment()" [disabled]="started">Start experiment</button>
    <button (click)="getNextSet()" [disabled]="!started">Next set</button>
</div>

我在 Stack Overflow 上搜索了解决方案并尝试实现我找到的解决方案，但由于某种原因它没有帮助。

Answer 1

如果你想让元素并排，你应该使用样式“display: inline-block”。

你可以尝试用 div 包裹内容并在底部放置边框布局，如下所示:

更新 用样式 display: grid 将容器包裹在一个 div 中；网格模板列:50% 50%；

        div.describer {
    text-align: center;
    float: right;
    width: 50%;
    height: 80%;
}

div.describer div.container {
    margin: 1em;
}

div.describer div.container img.blocked {
    padding: 5px;
    border: 5px solid blue;
}

div.describer div.container img.target {
    padding: 5px;
    border: 5px solid red;
}

div.guesser {
    text-align: center;
    float: left;
    width: 50%;
    height: 80%;
}

div.guesser div.container {
    margin: 1em;
}

div.guesser div.container.blocked {
    background-color: black;
    display: inline-block;
}

div.guesser div.container.blocked img.blocked {
    opacity: 0;
}

div.guesser div.container img.selected {
    padding: 5px;
    border: 5px solid red;
    border-radius: 3;
}

div.vertical-divider {
    position: absolute;
    left: 50%;
    top: 10%;
    bottom: 20%;
    border-left: 1px solid gray;
}

hr.horizontal-divider {
    position: absolute;
    left: 5%;
    right: 5%;
    bottom: 19%;
}

div.commands-container {
    position: fixed;
    left: 50%;
    bottom: 10%;
    transform: translate(-50%, 0%);
}
div.div-main {
        border-bottom-style: solid;
        overflow: auto;
}
div.grid-containers {
    display: grid;
    grid-template-columns: 50% 50%;
}

<div class="describer">
    <h3>Describer</h3>
    <div class="grid-containers">
    <div class="container" *ngFor="let icon of icons">
        <img src="assets/icons/{{trialNum+1}}/{{icon}}" [ngClass]="{blocked: icon == blockedIcon, target: icon == targetIcon}">
        <p *ngIf="icon == blockedIcon">Blocked</p>
        <p *ngIf="icon == targetIcon">Target</p>
    </div>
    </div>
</div>
<div class="vertical-divider"></div>
<div class="guesser">
    <h3>Guesser</h3>
    <div class="grid-containers">
    <div class="container" [ngClass]="{blocked: icon == blockedIcon}">
        <img src="assets/icons/{{trialNum+1}}/{{icon}}" [ngClass]="{blocked: icon == blockedIcon, selected: icon == selectedIcon}">
    </div>
    </div>
</div>
</div>
<div class="commands-container">
    <button (click)="startExperiment()" [disabled]="started">Start experiment</button>
    <button (click)="getNextSet()" [disabled]="!started">Next set</button>
</div>