親に2つのdivを並べて並べます

Question

2つのdivをスタイル "col2"と並べて表示します。 これら2つのdivを水平に整列させたいと思います。 今日私は1つの列しか持っていないときはうまく動作しますが、2 divを横に並べると、divは中央に配置されません。

IMG

HTML

<div class="secondGroup"> 
    <div class="col2"> 
     <p class="titleSection">test 1</p> 
     <hr /> 
    </div> 
    <div class="col2"> 
     <p class="titleSection">test 2</p> 
     <hr /> 
    </div> 
</div> 

CSS

.secondGroup { 
    text-align: center; 
    margin-top: 40px; 
    margin-bottom: 40px; 
    overflow: auto; 
} 

.col2 { 
    float: left; 
    width: 46.3%; 
    height: 350px; 
    background: white; 
} 

.col2:last-child { 
    margin-left: 40px; 
} 

.col2 .title { 
    float: left; 
    margin-left: 20px; 
    font-size: 14px; 
} 

Answer 1

.secondGroupのフレックスボックスをdisplay:flex;プロパティで作成し、子からfloatプロパティを削除します。

.secondGroup { 
 
    text-align: center; 
 
    margin-top: 40px; 
 
    margin-bottom: 40px; 
 
    overflow: auto; 
 
    display:flex; 
 
} 
 

 
.col2 { 
 
    width: 46.3%; 
 
    height: 350px; 
 
    background: white; 
 
} 
 

 
.col2:last-child { 
 
    margin-left: 40px; 
 
} 
 

 
.col2 .title { 
 
    margin-left: 20px; 
 
    font-size: 14px; 
 
}

<div class="secondGroup"> 
 
    <div class="col2"> 
 
     <p class="titleSection">test 1</p> 
 
     <hr /> 
 
    </div> 
 
    <div class="col2"> 
 
     <p class="titleSection">test 2</p> 
 
     <hr /> 
 
    </div> 
 
</div>

Answer 2

だけ.col2 .TITLEします。コードから

float: left; 

を削除も

Answer 3

を働いているfloat: left;を削除し、.col2にdisplay: inline-block;を追加し、中心を行います。更新

.col2 { 
    display: inline-block; 
    width: 46.3%; 
    height: 350px; 
    background: white; 
} 

Working Fiddle

Answer 4

、ここdisplay: inline-block

.secondGroup { 
    text-align: center; 
    margin-top: 40px; 
    margin-bottom: 40px; 
    overflow: auto; 
} 

.col2 { 
    display: inline-block; 
    width: 46.3%; 
    height: 350px; 
    background: white; 
} 

.col2:last-child { 
    margin-left: 40px; 
} 

.col2 .title { 
    float: left; 
    margin-left: 20px; 
    font-size: 14px; 
} 

ライブデモを使用します。私は左のフロートを削除し、インラインブロックを追加しようとした、divタグが今集中しているhttps://jsfiddle.net/cw5cojbo/5/