将内容放在列中
Placing content in columns
有 3 条技能线，我希望它们在 3 列中一个接一个地放置，我也想创建第 4 列！
本来是这样的
_
_
_
_
我想要这样
__________ _________ ______________ ________________
__________ _________ ______________ ________________
_________ __________ ______________ _______________
/* About Us
--------------------------------------------------------*/
}
.teamSkill {
margin-bottom: 40px;
}
p.skill {
clear: left;
font-size: 11px;
letter-spacing: 0.04em;
margin: 0;
text-transform: uppercase;
}
.bar {
background-color: #7b133c;
border-radius: 11px;
color: #FFFFFF;
display: inline-block;
float: left;
height: 22px;
line-height: 22px;
margin: 0 0 2px;
transition: all 0.6s ease-in-out 0s;
width: 22px;
}
.teamSkill:hover .percent100 {width: 100%;}
.teamSkill:hover .percent95 {width: 95%;}
.teamSkill:hover .percent90 {width: 90%;}
.teamSkill:hover .percent85 {width: 85%;}
.teamSkill:hover .percent80 {width: 80%;}
.teamSkill:hover .percent75 {width: 75%;}
.teamSkill:hover .percent70 {width: 70%;}
.teamSkill:hover .percent65 {width: 65%;}
.teamSkill:hover .percent60 {width: 60%;}
.teamSkill:hover .percent55 {width: 55%;}
.teamSkill:hover .percent50 {width: 50%;}
.teamSkill:hover .percent45 {width: 45%;}
.teamSkill:hover .percent40 {width: 40%;}
.teamSkill:hover .percent35 {width: 35%;}
.teamSkill:hover .percent30 {width: 30%;}
.teamSkill:hover .percent25 {width: 25%;}
.teamSkill:hover .percent20 {width: 20%;}
p.percent {
float: right;
margin-right: 6px;
text-align: right;
opacity: 0;
transition: all 0.6s ease-in 0s;
}
.ie8 p.percent {
display:none;
}
.teamSkill:hover p.percent {
opacity: 1;
}
.ie8 .teamSkill:hover p.percent {
display:block;
}
.statsWrap {
width: 130px;
margin: 10px;
float: left;
}
.stats {
display: inline-block;
position: relative;
width: 100%;
transition: all 0.3s ease-in-out 0s;
}
.statDummy {
margin-top: 100%;
}
.statInfo {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #7b133c;
border-radius: 50%;
text-align: center;
}
.statNumber {
font-size: 60px;
transition: all 0.5s ease-in-out 0s;
padding-top: 24px;
margin-bottom: 0;
}
.statNumberMedium {
font-size: 50px;
transition: all 0.5s ease-in-out 0s;
padding-top: 30px;
margin-bottom: 0;
}
.statNumberSmall {
font-size: 36px;
transition: all 0.5s ease-in-out 0s;
padding-top: 38px;
margin-bottom: 0;
}
.statText {
transition: all 0.5s ease-in-out 0s;
opacity: 0;
transform: scale(0);
padding: 0;
margin-top: -25px;
}
.stats:hover {
transform: scale(2);
z-index: 10;
}
.stats:hover .statNumber {
transform: scale(.6);
}
.stats:hover .statText {
transform: scale(.6);
opacity: 1;
}
.twitter {background: url("../images/icons/icon-social-twitter.png") no-repeat scroll 0 0 transparent;}
.facebook {background: url("../images/icons/icon-social-facebook.png") no-repeat scroll 0 0 transparent;}
.digg {background: url("../images/icons/icon-social-digg.png") no-repeat scroll 0 0 transparent;}
.vimeo {background: url("../images/icons/icon-social-vimeo.png") no-repeat scroll 0 0 transparent;}
.youtube {background: url("../images/icons/icon-social-youtube.png") no-repeat scroll 0 0 transparent;}
.skype {background: url("../images/icons/icon-social-skype.png") no-repeat scroll 0 0 transparent;}
.linkedin {background: url("../images/icons/icon-social-linkedin.png") no-repeat scroll 0 0 transparent;}
.dropbox {background: url("../images/icons/icon-social-dropbox.png") no-repeat scroll 0 0 transparent;}
.twitter-white {background: url("../images/icons/icon-social-twitter-white.png") no-repeat scroll 0 0 transparent;}
.facebook-white {background: url("../images/icons/icon-social-facebook-white.png") no-repeat scroll 0 0 transparent;}
.digg-white {background: url("../images/icons/icon-social-digg-white.png") no-repeat scroll 0 0 transparent;}
.vimeo-white {background: url("../images/icons/icon-social-vimeo-white.png") no-repeat scroll 0 0 transparent;}
.youtube-white {background: url("../images/icons/icon-social-youtube-white.png") no-repeat scroll 0 0 transparent;}
.skype-white {background: url("../images/icons/icon-social-skype-white.png") no-repeat scroll 0 0 transparent;}
.linkedin-white {background: url("../images/icons/icon-social-linkedin-white.png") no-repeat scroll 0 0 transparent;}
.dropbox-white {background: url("../images/icons/icon-social-dropbox-white.png") no-repeat scroll 0 0 transparent;}
/* Services
--------------------------------------------------------*/
#services {
padding-top: 0px;
}
.servicesContainer {
padding-bottom: 100px;
}
.serviceItem {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
cursor: default;
height: 236px;
position: relative;
width: 236px;
margin: 20px auto;
}
.serviceInfoWrap, .serviceInfo {
height: 196px;
position: absolute;
width: 196px;
}
.serviceInfoWrap {
background: url("../images/bg.html") repeat scroll 0 0 #F9F9F9;
box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.4), 0 0 3px rgba(115, 114, 23, 0.8) inset;
left: 20px;
top: 20px;
}
.serviceInfo > div {
background-position: center center;
display: block;
height: 100%;
position: absolute;
width: 100%;
text-align: center;
}
.serviceInfo .serviceInfoFront {
transition: all 0.6s ease-in-out 0s;
}
.serviceInfo .serviceInfoBack {
background:#7b133c;
opacity: 0;
pointer-events: none;
transform: scale(1.5);
transition: all 0.4s ease-in-out 0.2s;
}
.ie8 .serviceInfo .serviceInfoBack {
display: none;
}
.copywriting, .copywriting .serviceInfoFront {background-image: url(../images/services/copywriting.jpg);}
.creativity, .creativity .serviceInfoFront {background-image: url(../images/services/creativity.jpg);}
.production, .production .serviceInfoFront {background-image: url(../images/services/production.jpg);}
.development, .development .serviceInfoFront {background-image: url(../images/services/development.jpg);}
.photography, .photography .serviceInfoFront {background-image: url(../images/services/photography.jpg);}
.strategy, .strategy .serviceInfoFront {background-image: url(../images/services/strategy.jpg);}
.serviceInfo h3 {
color: #FFFFFF;
font-size: 18px;
margin: 0 15px;
padding: 0 0 10px;
text-align: center;
text-transform: uppercase;
}
.serviceInfo p {
border-top: 1px solid rgba(255, 255, 255, 0.5);
color: #FFFFFF;
margin: 0 20px;
padding: 5px 10px 0;
}
.serviceIcon {
width: 35px;
height: 35px;
margin: 20px auto 10px auto;
}
.creativity .serviceIcon {background-image: url("../images/icons/icon-creativity.png");}
.development .serviceIcon {background-image: url("../images/icons/icon-app-development.png");}
.strategy .serviceIcon {background-image: url("../images/icons/icon-brand-strategy.png");}
.copywriting .serviceIcon {background-image: url("../images/icons/icon-copywriting.png");}
.photography .serviceIcon {background-image: url("../images/icons/icon-photography.png");}
.production .serviceIcon {background-image: url("../images/icons/icon-HD-video.png");}
.serviceItem:hover .serviceInfoFront {
opacity: 0;
transform: scale(0);
}
.serviceItem:hover .serviceInfoBack {
opacity: 1;
pointer-events: auto;
transform: scale(1);
}
.ie8 .serviceItem:hover .serviceInfoBack {
display: block;
}
</div>
<h3 class="sectionTitle">Skills</h3>
<div class="teamSkill">
<ul>
<li>
<p class="skill">Client Liasing</p>
<div class="bar percent90">
<p class="percent">90%</p></div>
</li>
<li>
<p class="skill">Client Lunches</p>
<div class="bar percent100">
<p class="percent">100%</p></div>
</li>
<li>
<p class="skill">i devices</p>
<div class="bar percent90">
<p class="percent">90%</p></div>
</li>
<li>
<p class="skill">Driving</p>
<div class="bar percent40">
<p class="percent">40%</p></div>
</li>
<li>
<p class="skill">MS Word</p>
<div class="bar percent25">
<p class="percent">25%</p></div>
</li>
</ul>
</div>
</div>
<h3 class="sectionTitle">Skills</h3>
<div class="teamSkill">
<ul>
<li>
<p class="skill">Photoshop</p>
<div class="bar percent90">
<p class="percent">90%</p></div>
</li>
<li>
<p class="skill">Illustrator</p>
<div class="bar percent80">
<p class="percent">80%</p></div>
</li>
<li>
<p class="skill">i devices</p>
<div class="bar percent90">
<p class="percent">90%</p></div>
</li>
<li>
<p class="skill">Movies</p>
<div class="bar percent60">
<p class="percent">60%</p></div>
</li>
<li>
<p class="skill">Cleaning</p>
<div class="bar percent25">
<p class="percent">25%</p></div>
</li>
</ul>
</div>
</div>
<h3 class="sectionTitle">Skills</h3>
<div class="teamSkill">
<ul>
<li>
<p class="skill">HTML</p>
<div class="bar percent90">
<p class="percent">90%</p></div>
</li>
<li>
<p class="skill">PHP</p>
<div class="bar percent60">
<p class="percent">60%</p></div>
</li>
<li>
<p class="skill">Coffee</p>
<div class="bar percent70">
<p class="percent">70%</p></div>
</li>
<li>
<p class="skill">Shopping</p>
<div class="bar percent100">
<p class="percent">100%</p></div>
</li>
<li>
<p class="skill">Shoes</p>
<div class="bar percent80">
<p class="percent">80%</p></div>
</li>
</ul>
</div>
</div>
在我的脑海中，这里有三种可能的方法。
- 表
- 布局助手（如 Bootstrap 或 Pure）
- 内联块
Inline，是最快的解决方法。在您的 .team-skill class 中，设置您选择的 max-width（目前 180px 即可），然后添加：
display: inline-block;
float: left;
现在，根据您的 window 大小，大多数团队技能 div 应该相互依偎，列式。然而，这种方法并不健壮，而且打破它并不需要太多。让我们试试 tables...
<table>
<tr>
<td>
///- Stick a team-skill div in here -///
</td>
<td>
///- Put another team-skill div in here -///
</td>
<td>
///- And so on... -///
</td>
</tr>
</table>
表格很好 1) 因为它们是本机的并且不需要插件或框架，并且 2) 嗯...嗯...是的。他们很好也很容易。它们肯定比内联解决方案更健壮，但它们不被视为响应式解决方案。如果您希望这些列在各种设备上看起来都不错，请熟悉 布局框架。这里有一些：
这些框架将为您提供强大的工具来构建您想要的任何布局，包括您的 4 列。
我尝试了很多使用开发人员工具的方法，直到我得到我需要的东西，然后复制并粘贴到 Dreamweaver 中。现在看起来很棒！谢谢！
有 3 条技能线，我希望它们在 3 列中一个接一个地放置，我也想创建第 4 列！
本来是这样的
_
_
_
_
我想要这样
__________ _________ ______________ ________________
__________ _________ ______________ ________________
_________ __________ ______________ _______________
/* About Us
--------------------------------------------------------*/
}
.teamSkill {
margin-bottom: 40px;
}
p.skill {
clear: left;
font-size: 11px;
letter-spacing: 0.04em;
margin: 0;
text-transform: uppercase;
}
.bar {
background-color: #7b133c;
border-radius: 11px;
color: #FFFFFF;
display: inline-block;
float: left;
height: 22px;
line-height: 22px;
margin: 0 0 2px;
transition: all 0.6s ease-in-out 0s;
width: 22px;
}
.teamSkill:hover .percent100 {width: 100%;}
.teamSkill:hover .percent95 {width: 95%;}
.teamSkill:hover .percent90 {width: 90%;}
.teamSkill:hover .percent85 {width: 85%;}
.teamSkill:hover .percent80 {width: 80%;}
.teamSkill:hover .percent75 {width: 75%;}
.teamSkill:hover .percent70 {width: 70%;}
.teamSkill:hover .percent65 {width: 65%;}
.teamSkill:hover .percent60 {width: 60%;}
.teamSkill:hover .percent55 {width: 55%;}
.teamSkill:hover .percent50 {width: 50%;}
.teamSkill:hover .percent45 {width: 45%;}
.teamSkill:hover .percent40 {width: 40%;}
.teamSkill:hover .percent35 {width: 35%;}
.teamSkill:hover .percent30 {width: 30%;}
.teamSkill:hover .percent25 {width: 25%;}
.teamSkill:hover .percent20 {width: 20%;}
p.percent {
float: right;
margin-right: 6px;
text-align: right;
opacity: 0;
transition: all 0.6s ease-in 0s;
}
.ie8 p.percent {
display:none;
}
.teamSkill:hover p.percent {
opacity: 1;
}
.ie8 .teamSkill:hover p.percent {
display:block;
}
.statsWrap {
width: 130px;
margin: 10px;
float: left;
}
.stats {
display: inline-block;
position: relative;
width: 100%;
transition: all 0.3s ease-in-out 0s;
}
.statDummy {
margin-top: 100%;
}
.statInfo {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #7b133c;
border-radius: 50%;
text-align: center;
}
.statNumber {
font-size: 60px;
transition: all 0.5s ease-in-out 0s;
padding-top: 24px;
margin-bottom: 0;
}
.statNumberMedium {
font-size: 50px;
transition: all 0.5s ease-in-out 0s;
padding-top: 30px;
margin-bottom: 0;
}
.statNumberSmall {
font-size: 36px;
transition: all 0.5s ease-in-out 0s;
padding-top: 38px;
margin-bottom: 0;
}
.statText {
transition: all 0.5s ease-in-out 0s;
opacity: 0;
transform: scale(0);
padding: 0;
margin-top: -25px;
}
.stats:hover {
transform: scale(2);
z-index: 10;
}
.stats:hover .statNumber {
transform: scale(.6);
}
.stats:hover .statText {
transform: scale(.6);
opacity: 1;
}
.twitter {background: url("../images/icons/icon-social-twitter.png") no-repeat scroll 0 0 transparent;}
.facebook {background: url("../images/icons/icon-social-facebook.png") no-repeat scroll 0 0 transparent;}
.digg {background: url("../images/icons/icon-social-digg.png") no-repeat scroll 0 0 transparent;}
.vimeo {background: url("../images/icons/icon-social-vimeo.png") no-repeat scroll 0 0 transparent;}
.youtube {background: url("../images/icons/icon-social-youtube.png") no-repeat scroll 0 0 transparent;}
.skype {background: url("../images/icons/icon-social-skype.png") no-repeat scroll 0 0 transparent;}
.linkedin {background: url("../images/icons/icon-social-linkedin.png") no-repeat scroll 0 0 transparent;}
.dropbox {background: url("../images/icons/icon-social-dropbox.png") no-repeat scroll 0 0 transparent;}
.twitter-white {background: url("../images/icons/icon-social-twitter-white.png") no-repeat scroll 0 0 transparent;}
.facebook-white {background: url("../images/icons/icon-social-facebook-white.png") no-repeat scroll 0 0 transparent;}
.digg-white {background: url("../images/icons/icon-social-digg-white.png") no-repeat scroll 0 0 transparent;}
.vimeo-white {background: url("../images/icons/icon-social-vimeo-white.png") no-repeat scroll 0 0 transparent;}
.youtube-white {background: url("../images/icons/icon-social-youtube-white.png") no-repeat scroll 0 0 transparent;}
.skype-white {background: url("../images/icons/icon-social-skype-white.png") no-repeat scroll 0 0 transparent;}
.linkedin-white {background: url("../images/icons/icon-social-linkedin-white.png") no-repeat scroll 0 0 transparent;}
.dropbox-white {background: url("../images/icons/icon-social-dropbox-white.png") no-repeat scroll 0 0 transparent;}
/* Services
--------------------------------------------------------*/
#services {
padding-top: 0px;
}
.servicesContainer {
padding-bottom: 100px;
}
.serviceItem {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
cursor: default;
height: 236px;
position: relative;
width: 236px;
margin: 20px auto;
}
.serviceInfoWrap, .serviceInfo {
height: 196px;
position: absolute;
width: 196px;
}
.serviceInfoWrap {
background: url("../images/bg.html") repeat scroll 0 0 #F9F9F9;
box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.4), 0 0 3px rgba(115, 114, 23, 0.8) inset;
left: 20px;
top: 20px;
}
.serviceInfo > div {
background-position: center center;
display: block;
height: 100%;
position: absolute;
width: 100%;
text-align: center;
}
.serviceInfo .serviceInfoFront {
transition: all 0.6s ease-in-out 0s;
}
.serviceInfo .serviceInfoBack {
background:#7b133c;
opacity: 0;
pointer-events: none;
transform: scale(1.5);
transition: all 0.4s ease-in-out 0.2s;
}
.ie8 .serviceInfo .serviceInfoBack {
display: none;
}
.copywriting, .copywriting .serviceInfoFront {background-image: url(../images/services/copywriting.jpg);}
.creativity, .creativity .serviceInfoFront {background-image: url(../images/services/creativity.jpg);}
.production, .production .serviceInfoFront {background-image: url(../images/services/production.jpg);}
.development, .development .serviceInfoFront {background-image: url(../images/services/development.jpg);}
.photography, .photography .serviceInfoFront {background-image: url(../images/services/photography.jpg);}
.strategy, .strategy .serviceInfoFront {background-image: url(../images/services/strategy.jpg);}
.serviceInfo h3 {
color: #FFFFFF;
font-size: 18px;
margin: 0 15px;
padding: 0 0 10px;
text-align: center;
text-transform: uppercase;
}
.serviceInfo p {
border-top: 1px solid rgba(255, 255, 255, 0.5);
color: #FFFFFF;
margin: 0 20px;
padding: 5px 10px 0;
}
.serviceIcon {
width: 35px;
height: 35px;
margin: 20px auto 10px auto;
}
.creativity .serviceIcon {background-image: url("../images/icons/icon-creativity.png");}
.development .serviceIcon {background-image: url("../images/icons/icon-app-development.png");}
.strategy .serviceIcon {background-image: url("../images/icons/icon-brand-strategy.png");}
.copywriting .serviceIcon {background-image: url("../images/icons/icon-copywriting.png");}
.photography .serviceIcon {background-image: url("../images/icons/icon-photography.png");}
.production .serviceIcon {background-image: url("../images/icons/icon-HD-video.png");}
.serviceItem:hover .serviceInfoFront {
opacity: 0;
transform: scale(0);
}
.serviceItem:hover .serviceInfoBack {
opacity: 1;
pointer-events: auto;
transform: scale(1);
}
.ie8 .serviceItem:hover .serviceInfoBack {
display: block;
}
</div>
<h3 class="sectionTitle">Skills</h3>
<div class="teamSkill">
<ul>
<li>
<p class="skill">Client Liasing</p>
<div class="bar percent90">
<p class="percent">90%</p></div>
</li>
<li>
<p class="skill">Client Lunches</p>
<div class="bar percent100">
<p class="percent">100%</p></div>
</li>
<li>
<p class="skill">i devices</p>
<div class="bar percent90">
<p class="percent">90%</p></div>
</li>
<li>
<p class="skill">Driving</p>
<div class="bar percent40">
<p class="percent">40%</p></div>
</li>
<li>
<p class="skill">MS Word</p>
<div class="bar percent25">
<p class="percent">25%</p></div>
</li>
</ul>
</div>
</div>
<h3 class="sectionTitle">Skills</h3>
<div class="teamSkill">
<ul>
<li>
<p class="skill">Photoshop</p>
<div class="bar percent90">
<p class="percent">90%</p></div>
</li>
<li>
<p class="skill">Illustrator</p>
<div class="bar percent80">
<p class="percent">80%</p></div>
</li>
<li>
<p class="skill">i devices</p>
<div class="bar percent90">
<p class="percent">90%</p></div>
</li>
<li>
<p class="skill">Movies</p>
<div class="bar percent60">
<p class="percent">60%</p></div>
</li>
<li>
<p class="skill">Cleaning</p>
<div class="bar percent25">
<p class="percent">25%</p></div>
</li>
</ul>
</div>
</div>
<h3 class="sectionTitle">Skills</h3>
<div class="teamSkill">
<ul>
<li>
<p class="skill">HTML</p>
<div class="bar percent90">
<p class="percent">90%</p></div>
</li>
<li>
<p class="skill">PHP</p>
<div class="bar percent60">
<p class="percent">60%</p></div>
</li>
<li>
<p class="skill">Coffee</p>
<div class="bar percent70">
<p class="percent">70%</p></div>
</li>
<li>
<p class="skill">Shopping</p>
<div class="bar percent100">
<p class="percent">100%</p></div>
</li>
<li>
<p class="skill">Shoes</p>
<div class="bar percent80">
<p class="percent">80%</p></div>
</li>
</ul>
</div>
</div>
在我的脑海中，这里有三种可能的方法。
- 表
- 布局助手（如 Bootstrap 或 Pure）
- 内联块
Inline，是最快的解决方法。在您的 .team-skill class 中，设置您选择的 max-width（目前 180px 即可），然后添加：
display: inline-block;
float: left;
现在，根据您的 window 大小，大多数团队技能 div 应该相互依偎，列式。然而，这种方法并不健壮，而且打破它并不需要太多。让我们试试 tables...
<table>
<tr>
<td>
///- Stick a team-skill div in here -///
</td>
<td>
///- Put another team-skill div in here -///
</td>
<td>
///- And so on... -///
</td>
</tr>
</table>
表格很好 1) 因为它们是本机的并且不需要插件或框架，并且 2) 嗯...嗯...是的。他们很好也很容易。它们肯定比内联解决方案更健壮，但它们不被视为响应式解决方案。如果您希望这些列在各种设备上看起来都不错，请熟悉 布局框架。这里有一些：
这些框架将为您提供强大的工具来构建您想要的任何布局，包括您的 4 列。
我尝试了很多使用开发人员工具的方法，直到我得到我需要的东西，然后复制并粘贴到 Dreamweaver 中。现在看起来很棒！谢谢！