두 div를 서로 옆에 배치하려면 어떻게해야합니까?

Question

어떻게 파란색과 검은 색 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>

너희들은 무엇을 추천 할 수의 옆에 약간의 패딩 왼쪽 모서리에있는 검은 DIV, 청색 DIV의 권리를 원해?

Answer 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/