html - 如何在中心创建 2 列和 6 行？

Question

我是 HTML/CSS 的新手，从周五开始就在我自己的网站上工作，但现在我卡住了，不知道如何解决我的问题。

我想在我的主页上创建一个“能力”部分，我可以在其中为每个“技能”添加 5 星(有些已满，有些则没有)。

例如:

Example

所以我需要帮助来创建标记的红色区域。

截图中这部分的 HTML 代码是:

<div id="abilities">
          <h2>Abilities</h2>
          <p class="quotes">"Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program."<br>- Linus Torvalds</p>

           <hr />

           <h3>Skills</h3>

           </div>

我用谷歌搜索了答案，但找不到适合我的答案。

如果有人能提供帮助，我将不胜感激。

我知道最简单的可能性是这样的:

<div>
<p>HTML <img src="star-filled1.png"><img src="star-filled1.png"><img src="star1.png"><img src="star1.png"><img src="star1.png"></p>
</div>

并更改 css 文件中的所有填充..但我觉得它不专业，而且会花费更多时间。

Answer 1

试试这个:

#wrapper {

	max-width: 1200px;
	width: 100%;
	border: 5px solid red;
	padding: 20px;
	margin: 0 auto;
	overflow: auto;
	font-weight: bold;

}

#left {

	float: left;
	width: 45%;
	box-sizing: border-box;
}

#right {

	float: right;
	width: 45%;
	box-sizing: border-box;
}

#col1, #col2 {
    float: left;
 }

#col1 {

	width: 85%;

}

#col2 {
		
	width: 15%;


}

p {
line-height: 100%;
font-size: 30px;
padding: 5px;
}


.wrap {

	float: right;

	
}

.blue {

	color: skyblue;

}

@media screen and (max-width: 760px) {

	p {
		font-size: 24px; 
	}
}

@media screen and (max-width: 630px) {

	p {
		font-size: 15px; 
	}
}

 <div id="wrapper">
  	<div id="left">
  		<div id="col1">

  			<p>Html<span class="wrap">
  			<span class="blue">&#x2605;&#x2605;</span>&#x2605;&#x2605;&#x2605;</span>
  			</p>
  			<p>Css<span class="wrap"><span class="blue">&#x2605;&#x2605;</span>&#x2605;&#x2605;&#x2605;</span></p>
  			<p>Java<span class="wrap"><span class="blue">&#x2605;&#x2605;&#x2605;</span>&#x2605;&#x2605;</span></p>
  			<p>Android<span class="wrap"><span class="blue">&#x2605;&#x2605;&#x2605;</span>&#x2605;&#x2605;</span></p>
  			<p>JavaScript<span class="wrap"><span class="blue">&#x2605;&#x2605;&#x2605;</span>&#x2605;&#x2605;</span></p>
  			
  		</div>
  		<div id="col2"></div>
  	</div>
  	<div id="right">
  		<div id="col1">

  			<p>My-Sql<span class="wrap">
  			<span class="blue">&#x2605;&#x2605;&#x2605;</span>&#x2605;&#x2605;</span>
  			</p>
  			<p>Jquery<span class="wrap"><span class="blue">&#x2605;</span>&#x2605;&#x2605;&#x2605;&#x2605;</span></p>
  			<p>XML<span class="wrap"><span class="blue">&#x2605;&#x2605;</span>&#x2605;&#x2605;&#x2605;</span></p>
  			<p>PHP<span class="wrap"><span class="blue">&#x2605;&#x2605;</span>&#x2605;&#x2605;&#x2605;</span></p>
  			
  		</div>
  		<div id="col2"></div>
  	</div>
  </div>