CSS에서 div 행을 열로 변환

Question

좋아,이 질문은 간단하지만 지금 당분간이 문제를 파악하고 있습니다.이 div를 열에서 행으로 변환하는 것이 더 간단 할 지 궁금합니다. 지금 포맷.

문제

그래서 내가 어떻게 그것을 열로해야합니까? 내가 무료로 온라인이 템플릿을 가지고 내가 조금 혼동 할 수있다, 나는 패딩 크기를 변경 밖으로 시도 같은 있지만, 전체 레이아웃, HTML을 포함하여 이러한 경우에서는

.service-list { 
 
    padding: 0 0 0 0; 
 
    font-size: 14px; 
 
    margin-bottom: 40px; 
 
} 
 

 
.service-list-col1 { 
 
    float: left; 
 
    width: 60px; 
 
} 
 

 
.service-list-col3 { 
 
    float: left; 
 
    width: 60px; 
 
} 
 

 
.service-list-col4 { 
 
    float: left; 
 
    width: 60px; 
 
} 
 

 
.service-list-col1 i { 
 
    font-style: normal; 
 
    font-size: 38px; 
 
    display: block; 
 
    color: #222; 
 
    font-family: 'FontAwesome'; 
 
    line-height: 38px; 
 
} 
 

 
.service-list-col2 { 
 
    overflow: hidden; 
 
} 
 

 
.main-section.alabaster { 
 
    background: #fafafa; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<section class="main-section" id="service"> 
 
    <!--main-section-start--> 
 
    <div class="container"> 
 
    <h2>Services</h2> 
 
    <h6>Your investment plus our market experience, endless possibilities.</h6> 
 
    <div class="row"> 
 
     <div class="col-lg-4 col-sm-6 wow fadeInLeft delay-05s"> 
 
     <div class="service-list"> 
 
      <div class="service-list-col1"><img src="img/iconn.png" alt="" width="39" height="37" /></div> 
 
      <div class="service-list-col2"> 
 
      <h3>Business development &amp; Project Syndication</h3> 
 
      <p>Highest and Best Use Study for Properties<br> Syndication of Projects<br> Project Feasibility Studies<br> Jumpstarting a New Business<br> Brand Planning<br> Business Planning</p> 
 
      </div> 
 
     </div> 
 
     <div class="service-list"> 
 
      <div class="service-list-col3"><img src="img/iconn.png" alt="" width="39" height="37" /></div> 
 
      <div class="service-list-col2"> 
 
      <h3>investors support and management advisory</h3> 
 
      <p>Business Opportunity Scanning<br> Investment Planning &amp; Implementation<br> Negotiations with Local Partners<br> Advisory on Business Entry into Philippines<br> Management to Reposition Existing Property.</p> 
 
      </div> 
 
     </div> 
 
     <div class="service-list"> 
 
      <div class="service-list-col4"><img src="img/iconn.png" alt="" width="39" height="37" /></div> 
 
      <div class="service-list-col2"> 
 
      <h3>strategies in marketing development, marketing, and sales.</h3> 
 
      <p>Strategic Market Research and Planning<br> Positioning &amp; Branding Strategies<br> Market Development Strategies<br> Customized Strategic Marketing &amp; Sales<br> Interventions 
 
      </p> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <figure class="col-lg-8 col-sm-6 text-right wow fadeInUp delay-02s"> </figure> 
 

 
    </div> 
 
    </div> 
 
</section> 
 
<!--main-section-end-->

Answer 1

유적 마크 업은 문제를 해결하는 데 도움이되지만 보자.

우선, 행이 있습니다. 주어진 그림은 하나의 열과 3 개의 행을 가지므로,이 열을 열로 바꾸고 싶다고 가정합니다.

이렇게하려면 해당 열의 컨테이너 (모두 .service-list 요소를 중첩하는 요소)의 컨테이너가 width: 100%인지 확인하십시오.

.service-list-col* 요소의 너비가 실제 너비보다 적고 넘칠 수 있으므로 width: 60px을 제거해야하므로 제거하거나 더 큰 값으로 설정하십시오.

여전히 작동하지 않는다면 .service-list 요소에 display: inline-block을 추가하십시오.

희망이 도움이됩니다.

업데이트
아, 지금은 HTML 마크 업과 함께 더 의미가 있습니다. 위의 내 CSS 제안을 무시하십시오.이 구조로 부트 스트랩의 클래스를 사용하여 결과를 얻을 수 있습니다.

우선, 사용자의 service-lists 래퍼가 전체 페이지를 덮을 수 있어야합니다. 이렇게하려면 12 개의 열 (기본 부트 스트랩 CSS는 사용 된 화면 너비를 12 열로 분할 함)을 정의해야합니다. 이렇게하려면이 클래스 col-lg-4 col-sm-6을 제거하고 col-xs-12을 추가하십시오. 이렇게하면이 요소가 모든 화면에서 전체 화면 너비를 차지한다는 것을 부트 스트랩에 알릴 수 있습니다.

두 번째로 화면의 1/3을 덮으려면 service-list divs가 필요하므로 응답 성이 좋으면 클래스 col-lg-4 col-md-6 col-xs-12을 추가하십시오. 이렇게하면 대형 화면 (12/4 = 3)에서 행당 3, 중형 화면 (12/6 = 2)에서 행당 2, 작고 작은 소형 화면 (12/12 = 1).

요약하면 여기에서 작동하는 fiddle을 볼 수 있습니다. CSS에서 변경하지 않았으며 방금 부트 스트랩 클래스를 사용했습니다. 실제 결과를 보려면 화면을 스트레치하여 실제로 데모에 표시되도록하십시오.