如何排列4个div？

Question

我想这些div是内联的。我试图将它们包装在一个div中并使用display：inline-block;让他们在水平行，但不能得到它的工作。我真的只是想让我的头脑定位和展示。任何帮助赞赏。

HTML

<div class="small_box_right"> 

    </div> 
    <div class="small_box_right"> 

    </div> 
    <div class="small_box_right"> 

    </div> 
    <div class="small_box_right"> 

    </div> 

CSS

.small_box_right { 
position: relative; 
display:flex; 
background: #CDCDB4; 
border: 4px solid black; 
height:300px; 
width:300px; 
} 
.small_box_right:after, .small_box_right:before { 
left: 100%; 
top: 50%; 
border: solid black; 
content: " "; 
height: ; 
width: ; 
position: absolute; 
pointer-events: none; 
} 
.small_box_right:after { 
border-color: rgba(136, 183, 213, 0); 
border-left-color: #CDCDB4;; 
border-width: 30px; 
margin-top: -30px; 
} 
.small_box_right:before { 
border-color: rgba(194, 225, 245, 0); 
border-left-color:black ; 
border-width: 36px; 
margin-top: -36px; 
} 

Answer 1

这里是一个DEMO

HTML：

<div class="box-cover"> 
<div class="small_box_right"> 

</div> 
<div class="small_box_right"> 

</div> 
<div class="small_box_right"> 

</div> 
<div class="small_box_right"> 

</div> 

</div> 

CSS：

.box-cover{ 
     position: relative; 
     height: 300px; 
     overflow: auto; 
     width: 1550px; 
    } 

    .small_box_right { 
     position: relative; 
     display:inline-block; 
     background: #CDCDB4; 
     border: 4px solid black; 
     height:300px; 
     width:300px; 
     margin-right: 50px; 
    } 
    .small_box_right:after, .small_box_right:before { 
     left: 100%; 
     top: 50%; 
     border: solid black; 
     content: " "; 
     height: ; 
     width: ; 
     position: absolute; 
     pointer-events: none; 
    } 
    .small_box_right:after { 
     border-color: rgba(136, 183, 213, 0); 
     border-left-color: #CDCDB4;; 
     border-width: 30px; 
     margin-top: -30px; 
    } 
    .small_box_right:before { 
     border-color: rgba(194, 225, 245, 0); 
     border-left-color:black ; 
     border-width: 36px; 
     margin-top: -36px; 
    }