javascript - 将内容放在列中

Question

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

Answer 1

在我的脑海中，这里有三种可能的方法。

• 表格
• 布局助手(如 Bootstrap 或 Pure)
• 内联 block

内联，是最快的解决方法。在您的 .team-skill 类中，设置您选择的 max-width(目前可以使用 180px)，然后添加:

display: inline-block;
float: left;

现在，根据您的窗口大小，大多数团队技能 div 应该相互依偎，呈列式。然而，这种方法并不健壮，而且打破它并不需要太多。让我们试试表格...

<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) 因为它们是 native 的并且不需要插件或框架，并且 2) 好吧......嗯......是的。他们很好也很容易。它们肯定比内联解决方案更健壮，但它们不被视为响应式解决方案。如果您希望这些列在各种设备上看起来都不错，请熟悉布局框架。这里有一些:

• > Skeleton
• > Bootstrap
• > Foundation
• > Pure

这些框架将为您提供强大的工具来构建您想要的任何布局，包括您的 4 列。