2つのdivを互いに並べて配置するにはどうすればよいですか？

Question

どのように青と黒のdivがお互いに横たわっているのですか？ 私はあなたたちは何をお勧めすることができますいくつかのパディングと左の隅に黒のdiv、および青のdiv右のそれの横に

#sortboks { 
 
\t align-content: center; 
 
\t color: white; 
 
\t max-width: 8%; 
 
\t padding: 1%; 
 
\t left: 10%; 
 
\t background-color: blue; 
 
\t position: relative; 
 
\t font-size: 15px; 
 
\t box-shadow:0; 
 
\t \t \t 
 
} 
 
#hvidboks { 
 
\t align-content: center; 
 
\t color: white; 
 
\t max-width: 20%; 
 
\t padding: 1%; 
 
\t left: 20%; 
 
\t background-color: #000000; 
 
\t position:relative; 
 
\t font-size: 15px; 
 
\t box-shadow:0; 
 
}

<div id="sortboks"> 
 
    <p> 
 
    <strong>NAME: </strong> 
 
    <br><strong>NICK NAME:</strong> 
 
    <br><strong>AGE:</strong> 
 
    <br><strong>BIRTH:</strong> 
 
    <br><strong>CITY:</strong> 
 
    <br><strong>EDUCATION:</strong> 
 
    <br><strong>LANGUAGE:</strong> 
 
    <br><strong>MOTTO:</strong> 
 
    <br><strong>FAV.QUOTES:</strong> 
 
    <br><strong>CODE EXPERIENCE:</strong> 
 
    </p> 
 
</div> 
 

 
<div id="hvidboks" style="width: 300px; top: 0px;bottom: 0px; "> 
 
    <p> 
 
    <br> 
 
    <br> 22 Year 
 
    <br> 11-08-1994 
 
    <br> Kolding 
 
    <br> Multimediadesigner 
 
    <br> Danish - English - Persian - Dari 
 
    <br> If you have a dream you gotta protect it no matter what 
 
    <br> Dont talk the talk, walk the walk 
 
    <br> HTML - CSS 
 
    </p> 
 
</div>

をしたいですか？

あなたが「表示：フレックス」でラッパーを使用することができ

Answer 1

私はここで行ったように： （あなたは1行でそれらを取得する方法を示すために、あなたの自己によってその唯一の例をあなたのパディングを追加する必要があります）

#wrapper { 
 
    display: flex; 
 
} 
 
#sortboks { 
 
\t align-content: center; 
 
\t color: white; 
 
\t max-width: 8%; 
 
\t padding: 1%; 
 
\t background-color: blue; 
 
\t position: relative; 
 
\t font-size: 15px; 
 
\t box-shadow:0; 
 
\t \t \t 
 
} 
 
#hvidboks { 
 
\t align-content: center; 
 
\t color: white; 
 
\t max-width: 20%; 
 
\t padding: 1%; 
 
\t background-color: #000000; 
 
\t position:relative; 
 
\t font-size: 15px; 
 
\t box-shadow:0; 
 
}

<div id="wrapper"> 
 

 
    <div id="sortboks"> 
 
    <p> 
 
     <strong>NAME: </strong> 
 
     <br><strong>NICK NAME:</strong> 
 
     <br><strong>AGE:</strong> 
 
     <br><strong>BIRTH:</strong> 
 
     <br><strong>CITY:</strong> 
 
     <br><strong>EDUCATION:</strong> 
 
     <br><strong>LANGUAGE:</strong> 
 
     <br><strong>MOTTO:</strong> 
 
     <br><strong>FAV.QUOTES:</strong> 
 
     <br><strong>CODE EXPERIENCE:</strong> 
 
    </p> 
 
    </div> 
 

 
    <div id="hvidboks" style="width: 300px; top: 0px;bottom: 0px; "> 
 
    <p> 
 

 
     <br> 
 
     <br> 22 Year 
 
     <br> 11-08-1994 
 
     <br> Kolding 
 
     <br> Multimediadesigner 
 
     <br> Danish - English - Persian - Dari 
 
     <br> If you have a dream you gotta protect it no matter what 
 
     <br> Dont talk the talk, walk the walk 
 
     <br> HTML - CSS 
 
    </p> 
 
    </div> 
 

 
</div>

あなたはCodecademyを試しCSSについての詳細を知りたい場合。それは無料です！ https://www.codecademy.com/