別のdiv内に複数のdivを手動で配置する方法

-1

このレイアウトを実現しようとしています黒い細線は外側のdivの境界線を示しています。内部には2つのdiv（赤と青）があります。その間に小さなスペースを置いて隣り合わせに配置したいと思います。また、赤いdivの上端/下端と青いdivの上端/下端は等しくなければなりません。左右は同じでなければならない。これは、ブラウザのサイズにかかわらず同じでなければなりません。別のdiv内に複数のdivを手動で配置する方法

私はマージンを使って遊んでみましたが、私はそのマージンを正確に等しくすることはできません。ここに私の試みの完全なcodeのリンクがあります。ここで

は私のコードの抜粋です：

#about { 
    background-color: #D1C9BE; 
    border-style: solid; 
    border-color: black; 
    position: relative; 
} 

#aboutImage { 
    border-style: dotted; 
    border-color: white; 
    background-color: red; 

    height: 150px; 
    width: 150px; 
    margin-top: 200px; 
} 

#aboutInfo { 
    border-style: dotted; 
    border-color: white; 
    background-color: blue; 

    width: 300px; 
    height: 400px; 
    font-size: 35px; 
    text-align: right; 

    margin-left: 20px;

}

も自動的にテキストがそれであるどのくらいに基づいてdiv要素のサイズをする方法はありますか？私は同じサイズの2つのdivsのソリューションを並べて配置しただけですが、サイズが異なる2つのdivでどのように行うのでしょうか？

出典

2017-10-11 dollaza

あなたは[フレキシボックス]になっているはずです（https://css-tricks.com/snippets/css/a-guideで必要なものを達成することができます〜フレックスボックス/）。 – tobiv

フレックスボックスを使用してください。フレックスボックスと従来のポジショニングスタイルを混在させないでください。あなたがdisplay: flexとjustify-content: space-evenly;と

body { 
 
\t margin: 0; 
 
} 
 

 
html, body { 
 
    height:100%; 
 
} 
 

 
/* FULLPAGE */ 
 
.section { 
 
    height: 100vh; 
 
\t display: flex; 
 
    justify-content: space-evenly; 
 
    align-items: center; 
 
} 
 

 
/* ABOUT */ 
 
#about { 
 
\t background-color: #D1C9BE; 
 
} 
 

 
#aboutImage { 
 
\t border-color: white; 
 
\t background-color: red; 
 
\t height: 150px; 
 
\t width: 150px; 
 
} 
 

 
#aboutInfo { 
 
\t border-color: white; 
 
\t background-color: blue; 
 
\t font-size: 35px; 
 
} 
 

 
#aboutInfo p { 
 
\t font-size: 15px; 
 
}

<html> 
 
    <body> 
 
    <section id="about" class="section"> 
 
\t \t \t <!-- Picture --> 
 
\t \t \t <div id="aboutImage"></div> 
 
\t \t \t 
 
\t \t \t <!-- Description --> 
 
\t \t \t <div id = "aboutInfo"> 
 
\t \t \t \t Lorem Ipsum. 
 
     <p> 
 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br> Suspendisse malesuada lacus commodo enim varius, <br> non gravida ipsum faucibus. Vivamus pretium pulvinar <br> elementum. In vehicula ut elit vitae dapibus. Cras ipsum <br> neque, finibus id mattis vehicula, rhoncus in mauris. In <br> hendrerit vitae velit vel consequat. Duis eleifend dui vel <br> tempor maximus. Aliquam rutrum id dolor vel ullamcorper. <br> Nunc cursus sapien a ex porta dictum. 
 
     </p> 
 
\t \t \t \t 
 
\t \t \t </div> 
 
\t \t \t 
 
\t \t </section> 
 
    
 
    </body> 
 
<html>

出典

2017-10-11 22:06:20

'justify-content'の正しい値は' space-around'です。 – tobiv

@tobivは本当にありません。スペース・アラウンドは、両端にハーフ・サイズのスペースを残します。仕様を参照してください。 https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content –

私は訂正されています。この場合、空間均等にうまく適合します。 – tobiv

フレックスを使用できます。親コンテナの場合、それは

.container { 
    display: flex; 
    flex-direction:row; 
    align-items: center; 
}

出典

2017-10-11 22:04:29 Nuchimik

あなたはそのためのflexboxを使用することができます入力します。水平に（justify-content）、垂直に（align-items）は、要素の周囲に等間隔で配置します（justify-content: space-evenly）。この場合、あなたの子要素は特別なスタイリングを必要としません。自動的にサイズのdiv再あなたの最後の質問については

#about { 
    display: flex; 
    align-items: center; 
    justify-content: space-evenly; 

    padding: 20px; 

    background-color: #D1C9BE; 
    border-style: solid; 
    border-color: black; 
} 

#aboutImage { 
    border-style: dotted; 
    border-color: white; 
    background-color: red; 

    height: 150px; 
    width: 150px; 
} 

#aboutInfo { 
    border-style: dotted; 
    border-color: white; 
    background-color: blue; 

    width: 300px; 
    height: 400px; 
    font-size: 35px; 
    text-align: right; 
}

あなたがheightプロパティを省略した場合、これは実際にはデフォルトです。 divは、テキストの行数と同じになります（widthのままとします）。

出典

2017-10-11 22:06:05 tobiv

別のdiv内に複数のdivを手動で配置する方法

答えて

関連する問題