试图通过CSS强制一条新线 - 显示：块不工作

Question

我想获得一个div占用整行，并强制下一个div的新行，通常会通过使用display:block据我所知，第一个div的css。但它不适合我。不知道我错过了什么。为了澄清，div我试图占用全线是标志 - 右div类。现在它显示在与照片相同的行上，并且左对齐。这里是我的HTML：

<div class="flags-right"> 
    <div class="red-circle"></div> 
    <div class="blue-circle"></div> 
    <div class="yellow-circle"></div> 
</div> 
<div class="photo"><img [src]="rkPhoto" alt="photo" /></div> 

这是我的CSS：

.flags-right { 
     float: right; 
     display: block 
    } 

    .photo { 
    float: left; 
    height: 4.563rem; 
    width: 4.688rem; 
    margin-right: 0.75rem; 
} 

.red-circle { 
    width: 20px; 
    height: 20px; 
    float: left; 
    margin-right: 4px; 
    background: #f9646a; 
    -moz-border-radius: 50px; 
    -webkit-border-radius: 50px; 
    border-radius: 50px; 
    } 
.blue-circle { 
    width: 20px; 
    height: 20px; 
    float: left; 
    margin-right: 4px; 
    position: relative; 
    background: #54a6f4; 
    -moz-border-radius: 50px; 
    -webkit-border-radius: 50px; 
    border-radius: 50px; 
    } 
    .yellow-circle { 
    width: 20px; 
    height: 20px; 
    float: left; 
    margin-right: 4px; 
    position: relative; 
    background: #fcff26; 
    -moz-border-radius: 50px; 
    -webkit-border-radius: 50px; 
    border-radius: 50px; 
    } 

而这里的容器元素的CSS：

.col-1-4 { 
    background: @containerBgColor; 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); 
    color: @flagText; 
    float: left; 
    padding: 10px; 
    text-align: left; 
    margin-bottom: 8px; 
    margin-right: 8px; 
    width: 24%; 
    } 

Answer 1

地址：

clear:both; 

当使用浮动，“显示：块”不会导致一个div在“新行”上（display：block无论如何都是div的默认值）。你必须使用clear来告诉它从任何前面的浮点数开始。

Answer 2

检查您是否在父ul上使用display：flex。 然后它的flex-direction:column为垂直布局。