在左右對齊的每個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>