中間イメージと外側の4つのdivのhtml/cssフォーマット

Question

私は問題があり、助けが必要です。基本的には、中央の画像divと4つのdivを中央の画像の周りにテキストで表示します。また、ページの幅を崩すと、それらをすべて中央に置いておきます。スクリーンの真ん中にスマートフォンイメージと4つのテキストブロック（上2つと下2つ）を想像してみてください。さらに（事を複雑にするために、私は左上と下のテキストブロックに右揃えのテキストを、右上と下のテキストブロックにはテキストを並べ替えることを望みます。ページが崩壊すると、すべてのテキストが中央に揃えられます。ご協力いただきありがとうございます！

既存のコードに問題があります。テキストブロックを必要な場所に正確に移動することはできません。私は彼らを上部と下部に特別に望んでいません。また、テキストを適切に整列させることに問題があります。

これは私がこれまで持っているものです。

#solutions2Header { 
 
    text-align: center; 
 
    padding-top: 50px; 
 
    padding-bottom: 50px; 
 
    font-size: 40px; 
 
    font-weight: lighter; 
 
    letter-spacing: 2px; 
 
} 
 

 
.solutionSection2:after { /*clear float*/ 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
    margin: 0 auto; 
 
} 
 

 
.solutionSection2 > div { 
 
    float: left; 
 
    width: 33%; 
 
    box-sizing: border-box; 
 
    text-align: center; 
 
    background-color: red; 
 
} 
 

 
@media (max-width: 850px) { /*breakpoint*/ 
 
    .solutionSection2 > div { 
 
    float: none; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    width: 100%; 
 
    background-color: #FAFAFA; 
 
    text-align: center; 
 
    } 
 
} 
 

 
.solutions2 { 
 
    background-color: green; 
 
    height: 100%; 
 
    padding-bottom: 500px; 
 
} 
 

 
#iphonexCenter { 
 
    position: relative; 
 
    margin: 0 auto; 
 
} 
 

 
#bottomBox { 
 
    padding-bottom: 100px; 
 
}

<div class="solutions2"> 
 
    <h2 id="solutions2Header">Highlighted Features</h2> 
 
    <div class="solutionSection2"> 
 
    <div> 
 
     <p>Charges stored in one <br>place.</p> 
 
     <p><br>Provides peace of mind by<br>syncing and storing your charges<br>automatically.</p> 
 
    </div> 
 

 
    <div> 
 
     <img src="http://via.placeholder.com/300x600" id="iphonexCenter" alt="iPhone X Image" height="600" width="300" style="margin: 0 auto"> 
 
    </div> 
 

 
    <div> 
 
     <p>Individual and team<br>messaging.</p> 
 
     <p><br>100% HIPAA compliant text<br>messaging at the tip of your fingers.</p> 
 
    </div> 
 
    </div> 
 
    
 
    <div class="solutionSection2"> 
 
    <div id="bottomBox"> 
 
     <p>Track daily work<br>progress.</p> 
 
     <p><br>Intellegently helps locate<br>missing charges and provides a score<br>card to ensure all charges are entered.</p> 
 
    </div> 
 

 
    <div> 
 
     <p></p> 
 
    </div> 
 

 
    <div id="bottomBox"> 
 
     <p>Care coordination<br>alerts.</p> 
 
     <p><br>Be in the know. We can alert <br>your providers via admit/discharge 
 
     <br> notifications, stat, routine consults,<br> and more.</p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

古いブラウザのサポートを必要としない場合、私はフレックスボックスとなるだろう。それは非常に簡単です。ここに完全なガイドがありますhttps://css-tricks.com/snippets/css/a-guide-to-flexbox/