行の情報divを取得しようとしています

Question

私はこれらのすべてをページの真ん中にある「列」の並べ替えとして整列しようとしています。私が話していることを見ることができますhere

すべての見出しを一行にして、それらの直下に説明があるようにします。どうすればこのことができますか？このような何か

.departments-section { 
    border-top: 1px solid white; 
    border-bottom: 1px solid white; 
    margin-top: 40px; 
    text-align: center; 
    width: 100%; 
    width: auto; 
    background-color: #171717; 
    margin-bottom: 250px; 
} 

.department-names h3 { 
    color: white; 
    display: inline; 
    margin-top: 25px; 
    padding: 35px 25px; 
} 

.blaine-sheriff { 
    width: 15%; 
    margin-left: auto; 
    margin-right: auto; 
} 

.blaine-fire { 
    width: 15%; 
    margin-left: auto; 
    margin-right: auto; 
} 

.blaine-sheriff { 
    width: 15%; 
    margin-left: auto; 
    margin-right: auto; 
} 

.blaine-sheriff p { 
    color: white; 
} 

Answer 1

：

これは私のHTML

div class="departments-section"> 
      <div class="blaine-sheriff"> 
      <h3><b>Blaine County Sheriff's Office</b></h3> 
      <p>The mission of the Blaine County Sheriff is to protect and to serve Paleto Bay, Sandy Shores, surrounding areas. Only the best of the best are promoted.</p> 
      </div> 
      <div class="blaine-fire"> 
      <h3><b>Blaine County Fire</b></h3> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
      </div> 
      <div class="san-swat"> 
      <h3><b>San Andreas SWAT Team</b></h3> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
      </div> 
     </div> 

CSSのですか？子項目を中央に親コンテナにおける

使用display:flex：

display: flex; 
    align-items: center; 
    justify-content: center; 

同じCSSのすべての3セクションに適用される：と

計算幅：width: calc(100%/3);ので、それぞれは1/3 100％を取ります。

align-self: flex-start;ですので、項目は上部に揃えられています。

.blaine-sheriff, 
.blaine-fire, 
.san-swat { 
    color: white; 
    width: calc(100%/3); 
    margin: 0; 
    padding: 15px; 
    align-self: flex-start; 
} 

.departments-section { 
 
    border-top: 1px solid white; 
 
    border-bottom: 1px solid white; 
 
    margin-top: 40px; 
 
    width: 100%; 
 
    background-color: #171717; 
 
    margin-bottom: 250px; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
.blaine-sheriff, 
 
.blaine-fire, 
 
.san-swat { 
 
    color: white; 
 
    width: calc(100%/3); 
 
    margin: 0; 
 
    padding: 15px; 
 
    align-self: flex-start; 
 
}

<div class="departments-section"> 
 
    <div class="blaine-sheriff"> 
 
    <h3><b>Blaine County Sheriff's Office</b></h3> 
 
    <p>The mission of the Blaine County Sheriff is to protect and to serve Paleto Bay, Sandy Shores, surrounding areas. Only the best of the best are promoted.</p> 
 
    </div> 
 
    <div class="blaine-fire"> 
 
    <h3><b>Blaine County Fire</b></h3> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
 
     dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
    </div> 
 
    <div class="san-swat"> 
 
    <h3><b>San Andreas SWAT Team</b></h3> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
 
     dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
    </div> 
 
</div>

Answer 2

    <div class="row"> 
     <div class="col-md-4"> 
     <h3><b>Blaine County Sheriff's Office</b></h3> 
     <p>The mission of the Blaine County Sheriff is to protect and to serve Paleto Bay, Sandy Shores, surrounding areas. Only the best of the best are promoted.</p> 
     </div> 
     <div class="col-md-4"> 
     <h3><b>Blaine County Fire</b></h3> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     </div> 
     <div class="col-md-4"> 
     <h3><b>San Andreas SWAT Team</b></h3> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     </div> 
    </div> 

私はむしろそれが明確に定義されたルールを持っており、またデザインが応答可能として達成するためにブートストラップ手法を使用してのためにあなたをお勧めします。私は、HTML部分に必要な変更を加えただけで、ブートストラップCSSファイルを追加しました。 [https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css]