在左右对齐的每个2格内安装4个divs

Question

我正在开发一个使用Angular 2进行实验的人的小应用程序，因此我试图将4个div各自包含一个图像每2个div。

由于某些原因，所有的div（包含图像）都是一个在另一个上面对齐，而不是一个接一个地排列，只有在包装的情况下向下一行。我期望guesser和describer div适合指定区域：垂直分隔线左侧的guesser和垂直分隔线右侧的describer，以及水平分隔线上方的这两个区域，但它们似乎不能填满区域的宽度，并垂直溢出水平分隔线。

怎样的网站目前看起来

什么我期待的网站看看（我编辑了这个使用油漆，它只是为了举例说明）

这是我的组件的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>

我搜索了堆栈溢出的解决方案，并试图实现我发现的东西，但由于某种原因，它没有帮助。

Answer 1

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

你还可以试试用包装一个div内容，把一个边界布局在底部是这样的：

UPDATE 裹在风格显示一个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>