1. 홈
  2. 질의 응답
  3. 내용을 열에 넣기

내용을 열에 넣기

2015-02-03 5 views
1

스킬 라인은 3 가지이며, 3 가지 스킬 라인이 있으며 3 가지 열에 배치하고 4 번 열을 만들고 싶습니다!내용을 열에 넣기

원래,이

_

_

_

_

처럼 그리고 난이

__________ _________ ______________ ________________

012처럼 원하는 3,516,

__________ _________ ______________ ________________

_________ __________ ______________ _______________ 내 머리 위로 떨어져

/* About Us 
 
--------------------------------------------------------*/ 
 
\t 
 

 
} 
 

 
.teamSkill { 
 
\t 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; 
 
\t 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; 
 
\t opacity: 0; 
 
\t 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 { 
 
\t width: 130px; 
 
\t margin: 10px; 
 
\t float: left; 
 
} 
 
.stats { 
 
    display: inline-block; 
 
    position: relative; 
 
    width: 100%; 
 
\t 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%; 
 
\t text-align: center; 
 
} 
 
.statNumber { 
 
\t font-size: 60px; 
 
\t transition: all 0.5s ease-in-out 0s; 
 
\t padding-top: 24px; 
 
\t margin-bottom: 0; 
 
} 
 
.statNumberMedium { 
 
\t font-size: 50px; 
 
\t transition: all 0.5s ease-in-out 0s; 
 
\t padding-top: 30px; 
 
\t margin-bottom: 0; 
 
} 
 
.statNumberSmall { 
 
\t font-size: 36px; 
 
\t transition: all 0.5s ease-in-out 0s; 
 
\t padding-top: 38px; 
 
\t margin-bottom: 0; 
 
} 
 
.statText { 
 
\t transition: all 0.5s ease-in-out 0s; 
 
\t opacity: 0; 
 
\t transform: scale(0); 
 
\t padding: 0; 
 
\t margin-top: -25px; 
 
} 
 
.stats:hover { 
 
    transform: scale(2); 
 
\t z-index: 10; 
 
} 
 
.stats:hover .statNumber { 
 
    transform: scale(.6); 
 
} 
 
.stats:hover .statText { 
 
    transform: scale(.6); 
 
\t opacity: 1; 
 
} 
 

 
\t 
 
.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;} 
 
\t 
 
\t 
 
\t 
 
/* Services 
 
--------------------------------------------------------*/ 
 
\t 
 
#services { 
 
\t padding-top: 0px; 
 
} 
 
.servicesContainer { 
 
\t padding-bottom: 100px; 
 
} 
 
.serviceItem { 
 
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); 
 
    cursor: default; 
 
    height: 236px; 
 
    position: relative; 
 
    width: 236px; 
 
\t 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%; 
 
\t 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 { 
 
\t width: 35px; 
 
\t height: 35px; 
 
\t margin: 20px auto 10px auto; 
 
} 
 
\t 
 
.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>

출처

2015-02-03 hulla-land

답변

0

, 여기에 세 가지 방법이 있습니다.

  • 테이블
  • 레이아웃 (부트 스트랩 같은 또는 순수) 헬퍼
  • 인라인 블록

인라인, 빠른 수정 프로그램입니다. 당신의 .team-skill 클래스에서 (지금은 할 것 180px) 사용자가 선택한 max-width을 설정 한 다음 추가

display: inline-block; 
float: left;

이제 창 크기에 따라 div의 해야지 팀-기술의 대부분은 최대 snugging 될 하나에 다른, 열 스타일. 그러나이 접근 방식은 강력하지 않으며이를 해독하는 데 많은 시간이 걸리지 않습니다.

<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 열을 포함하여 원하는 레이아웃을 구축하는 강력한 도구를 제공합니다.

출처

2015-02-03 06:39:47 Miles

+0

이제 이미지가 매우 이상하게 보입니다. http://imgur.com/DG3FW1g –

+0

인라인이 가장 좋은 해결책이 아닌 이유는 무엇입니까? 빠른 수정이지만 쉽게 깨집니다. 다른 접근법을 시도하십시오. – Miles

+0

하지만 테이블을 사용했습니다 : ((( –

0

저는 개발자 도구를 사용하여 여러 가지 방법을 시도해 봤습니다. 필요한 도구가있을 때까지 복사 한 다음 Dreamweaver에 붙여 넣었습니다. 이제 좋아 보인다! 고맙습니다!

출처

2015-02-03 19:23:21

관련 문제

 관련 문제