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

Question

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

我想创造一个＆＃34;能力＆＃34;在我的主页上，我可以添加到每个＆＃34;技能＆＃34; 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

您可以使用旧方法并使用表格，并将页面格式化为表格 或者你可以使用bootstrap方法并使用行和列网格以这种方式格式化页面。 您也可以在自己的CSS中编写相同的代码，例如bootstrap，在这种情况下，您需要配置宽度为＆＃34;％＆＃34;的多个div，如宽度：每个div为49％。 如果您发布到目前为止的代码，将更容易告诉您应该继续研究的方向。

Answer 2

如果您正在使用某种设计框架，请告诉我，否则您可以这样做。

＆＃13;

＆＃13;

.container{
		width:100%;
		max-width:1200px;
		padding:15px;
		margin:0px auto;
	}
	.row{
		margin:0px auto;
		width:100%;
	}
	.text-col{
		width:20%;
		max-width:250px;
		color:#333;
		font-weight:500;
		text-transform:uppercase;
		float:left;
	}
	.rating-col{
		width:30%;
		max-width:350px;
		float:left;
	}
	.clear{
		clear:both;
	}

＆＃13;

<div class="container">
  <div class="row">
    <div class="text-col">
    	<strong>HTML</strong>
    </div>
    <div class="rating-col">
    	<span>start images/icons</span>
    </div>
    <div class="text-col">
    	<strong>Mysql</strong>
    </div>
    <div class="rating-col">
    	<span>start images/icons</span>
    </div>
    <div class="clearfix"></div>
  </div>
  <div class="row">
    <div class="text-col">
    	<strong>CSS</strong>
    </div>
    <div class="rating-col">
    	<span>start images/icons</span>
    </div>
    <div class="text-col">
    	<strong>JQuery</strong>
    </div>
    <div class="rating-col">
    	<span>start images/icons</span>
    </div>
    <div class="clearfix"></div>
  </div>
  <div class="row">
    <div class="text-col">
    	<strong>Java</strong>
    </div>
    <div class="rating-col">
    	<span>start images/icons</span>
    </div>
    <div class="text-col">
    	<strong>XML</strong>
    </div>
    <div class="rating-col">
    	<span>start images/icons</span>
    </div>
    <div class="clearfix"></div>
  </div>
  <div class="row">
    <div class="text-col">
    	<strong>Android</strong>
    </div>
    <div class="rating-col">
    	<span>start images/icons</span>
    </div>
    <div class="text-col">
    	<strong>PHP</strong>
    </div>
    <div class="rating-col">
    	<span>start images/icons</span>
    </div>
    <div class="clearfix"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

试试这个：

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

Answer 4

正如其他一些回复所提到的，使用bootstrap（基础，语义ui）等框架很容易做到这一点。我的建议是查看一些关于如何标记这些“星级”评级的示例，另一个提示是为明星图标而不是图像检查font awesome之类的内容。

有数百种方法可以达到这个目的，所以如果你遇到困难，我很乐意帮助你做一些例子。

Answer 5

你也可以使用flex。可以使用dl列表将html减少到最小值，任何类似的结构都可以使用

例如

＆＃13;

＆＃13;

* {
  padding: 0;
  margin: 0;
}

dl {
  display: flex;
  flex-wrap: wrap;
  width: 700px;
  margin: 2em auto;
  font-size: 20px;
  border: red solid;
  padding: 2em 80px 2em 20px;
  background:linear-gradient(to top left,silver,tomato,gold,gray)
}

dt {
  width: 120px;
  padding-left: 100px;
  font-weight: bold;
  margin: 0.1em 0;
}

dd {
  margin: auto 0;
  font-size: 1rem;
  width: 120px;
  color: rgba(0, 162, 234, 0);
  background: url(data:image/gif;base64,R0lGODlhmAAcAMQcAACi6gGm64GBgcXFxeXl5erq6vPz8/////Hx8eHh4eLi4v///+/v7+fn583Nzf39/fDw8P7+/srKyt/f387OzuDg4PLy8vn5+fv7+9DQ0Pb29snJyf///wAAAAAAAAAAACH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjEgNjQuMTQwOTQ5LCAyMDEwLzEyLzA3LTEwOjU3OjAxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgV2luZG93cyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpERTlEMDdFMzM5MDcxMUU3OTdEOEUwNkJEQ0Y3QzM1NCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpERTlEMDdFNDM5MDcxMUU3OTdEOEUwNkJEQ0Y3QzM1NCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkRFOUQwN0UxMzkwNzExRTc5N0Q4RTA2QkRDRjdDMzU0IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkRFOUQwN0UyMzkwNzExRTc5N0Q4RTA2QkRDRjdDMzU0Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEAQAAHAAsAAAAAJgAHAAABf8gJ45kaZ5oqq6sGLRwLM90Xb42GyQ52Ti9oE542hGLuOBgcPwdR8anKykNWInLY7ZKJVq7xwAgAAkulgUs8/mVcsRk9xswVgoE6955kA6Py2x0YEESYnU9A3d5OYl4gYdEhYJuhmMLiIqXmI6RhoM2lQGafnSQNEt3nIyZXqWipJM0X7NfpWO0X30cBhYMBQUEwQqNigrBBL8MCAYaLKiKra4zuLO21Fa6KBRWtt3etyUNz6nk5eRLGSS8vsDCxHjGwcnLzTfXlbfU2SXb+N/dV2Bw+2ctoIlx5hJu8YEwocIB6U70I/jNoIqBFPNNw1jx04iGDvEsKgEypEgd/v7/tRHI0ZvFjSo9kkhQMtUSICpqmlu4ohbBlyxjBkkZC0ZNnipovts5AGeMlq5k9lQ5lKipFkttzjg68ilVUFal6vj5QEZWaFsddg1aMYfVMWXdRsUn9uPZk2bVgiK7VxDHuigmeHpBYCBgDu+WEFubgmuNUH9rCPbLobAnuSunXM2paAAGxI0Yo0g8TnSKyeAsF5UBxyK3wyYyk5iFNRFPVEg5i/z8zDSK1lRePwb6RnYMBMSh1LXdVbFvu3hF4H5ubxBtGchlJu8ZYYizAaMOUkcc3W5uFdkvwn7TvaccdSs2PD8vPjzJ8S7aX3y/i3+LCjBcwIJ838lhgH8IJjgCD4AtCKjggxBGKOGEFEIYAgA7) no-repeat 0 0;
  background-size: auto 20px
}

＆＃13;

<dl>
  <dt>HTML</dt>
  <dd>details</dd>
  <dt>MYSQL</dt>
  <dd>skills 5</dd>
  <dt><del>CSS</del> ;)</dt>
  <dd>details</dd>
  <dt>JQuery</dt>
  <dd>details</dd>
  <dt>JAVA</dt>
  <dd>details</dd>
  <dt>XML</dt>
  <dd>details</dd>
  <dt>ANDROIDS</dt>
  <dd>details</dd>
  <dt>PhP</dt>
  <dd>details</dd>
  <dt>JavaScript</dt>
  <dd>details</dd>
</dl>

＆＃13;

＆＃13;

＆＃13;