Question

我如何定位蓝色和黑色div彼此相邻，而不是在上面？我希望左角的黑色div有一些填充，而蓝色div就在它旁边

#sortboks {
	align-content: center;
	color: white;
	max-width: 8%;
	padding: 1%;
	left: 10%;
	background-color: blue;
	position: relative;
	font-size: 15px;
	box-shadow:0;
			
}
#hvidboks {
	align-content: center;
	color: white;
	max-width: 20%;
	padding: 1%;
	left: 20%;
	background-color: #000000;
	position:relative;
	font-size: 15px;
	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

您可以使用包装＆＃34; display：flex＆＃34;就像我在这里做的：（你必须自己添加填充，这只是一个例子来展示如何将它们放在一行中）

＆＃13;

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

＆＃13;

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

＆＃13;

如果您想了解有关CSS的更多信息，请尝试使用Codecademy。免费！ https://www.codecademy.com/

我如何将我的2个div放在一起？

1 个答案: