在左右对齐的每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包装内容并在底部放置一个边框布局，如下所示：

<强>更新 将容器包裹在带有样式显示的div中：grid; grid-template-columns：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>