수평으로 정렬

수평으로 정렬

QA

수평으로 정렬

본문

개념도 없는 상태에서 구글링 해가면서 해보려니 어렵네요.

사진과 같이 세로로 나오는데

이걸 수평으로 첫번째는3개 

두번째것은 4개씩 모바일로 나오게  하고싶거든요.

고수님들 도와 주세요.

3554212097_1593761642.5879.jpg

 <!-- ################################################################################################ -->
  <div id="introblocks" class="hoc clear">
    <ul class="nospace">
      <!-- ################################################################################################ -->
      <li>
        <div><i class="fa fa-3x fa-phone"></i>
           <h4 class="heading"><p align="center" style="text-align: center;"><strong>경찰서</strong><br></p></h4>
           <a href='tel:112'>112</a>
        </div>
      </li>
      <li>
        <div><i class="fa fa-3x fa-phone"></i>
          <h4 class="heading"><p align="center" style="text-align: center;"><strong>소방서</strong><br></p></h4>
          <a href='tel:119'>119</a>
        </div>
      </li>
      <li>
        <div><i class="fa fa-3x fa-phone"></i>
          <h4 class="heading"><p align="center" style="text-align: center;"><strong>구급 콜 센터</strong><br></p></h4>
          <a href='tel:120'>120</a>
        </div>
      </li>
      <!-- ################################################################################################ -->
    </ul>
  </div>
  <!-- ################################################################################################ -->
위에는 사용한 소스입니다..

 

 

 

3554212097_1593761752.4946.jpg

 

 

 

 

<!-- ################################################################################################ -->
<div class="wrapper row3">
  <main class="hoc container clear"> 
    <!-- main body -->
    <!-- ################################################################################################ -->
    <div class="clearfix visible-xs-block">
      <h6 class="heading">Mauris nec eros feugiat</h6>
      <p>Curabitur ornare turpis id placerat tempor etiam</p>
    </div>
    <ul class="nospace group">
      <div class="col-xs-6 col-sm-4">
      <li class="one_quarter first">
        <article><a href='tel:1588.5114'><i class="icon btmspace-30 fa fa-dashcube"></i></a>
          <h6 class="heading font-x1">삼성화재</h6>
        </article>
      </li>
    </div>
      <div class="col-xs-6 col-sm-4">
      <li class="one_quarter">
        <article><a href="#"><i class="icon btmspace-30 fa fa-leaf"></i></a>
          <h6 class="heading font-x1">A lacinia imperdiet</h6>
        </article>
      </li>
    </div>
      <div class="col-xs-6 col-sm-4">
      <li class="one_quarter">
        <article><a href="#"><i class="icon btmspace-30 fa fa-assistive-listening-systems"></i></a>
          <h6 class="heading font-x1">Lacinia in et odio</h6>
        </article>
      </li>
    </div>
      <div class="col-xs-6 col-sm-4">
      <li class="one_quarter">
        <article><a href="#"><i class="icon btmspace-30 fa fa-ravelry"></i></a>
          <h6 class="heading font-x1">Tincidunt arcu</h6>
        </article>
      </li>
    </div>
      <div class="col-xs-6 col-sm-4">
      <ul class="nospace group">
        <li class="one_quarter first">
          <article><a href="#"><i class="icon btmspace-30 fa fa-dashcube"></i></a>
            <h6 class="heading font-x1">Finibus quam sit</h6>
          </article>
        </li>
      </div>
        <div class="col-xs-6 col-sm-4">
        <li class="one_quarter">
          <article><a href="#"><i class="icon btmspace-30 fa fa-leaf"></i></a>
            <h6 class="heading font-x1">A lacinia imperdiet</h6>
          </article>
        </li>
      </div>
        <div class="col-xs-6 col-sm-4">
        <li class="one_quarter">
          <article><a href="#"><i class="icon btmspace-30 fa fa-assistive-listening-systems"></i></a>
            <h6 class="heading font-x1">Lacinia in et odio</h6>
          </article>
        </li>
      </div>
        <div class="col-xs-6 col-sm-4">
        <li class="one_quarter">
          <article><a href="#"><i class="icon btmspace-30 fa fa-ravelry"></i></a>
            <h6 class="heading font-x1">Tincidunt arcu</h6>
          </article>
        </li>
      </div>
        <div class="col-xs-6 col-sm-4">
        <li class="one_quarter first">
          <article><a href="#"><i class="icon btmspace-30 fa fa-dashcube"></i></a>
            <h6 class="heading font-x1">Finibus quam sit</h6>
          </article>
        </li>
      </div>
        <div class="col-xs-6 col-sm-4">
        <li class="one_quarter">
          <article><a href="#"><i class="icon btmspace-30 fa fa-leaf"></i></a>
            <h6 class="heading font-x1">A lacinia imperdiet</h6>
          </article>
        </li>
      </div>
        <div class="col-xs-6 col-sm-4">
        <li class="one_quarter">
          <article><a href="#"><i class="icon btmspace-30 fa fa-assistive-listening-systems"></i></a>
            <h6 class="heading font-x1">Lacinia in et odio</h6>
          </article>
        </li>
      </div>
        <div class="col-xs-6 col-sm-4">
        <li class="one_quarter">
          <article><a href="#"><i class="icon btmspace-30 fa fa-ravelry"></i></a>
            <h6 class="heading font-x1">Tincidunt arcu</h6>
          </article>
        </li>
      </div>
        <div class="col-xs-6 col-sm-4">
        <ul class="nospace group">
          <li class="one_quarter first">
            <article><a href="#"><i class="icon btmspace-30 fa fa-dashcube"></i></a>
              <h6 class="heading font-x1">Finibus quam sit</h6>
            </article>
          </li>
        </div>
          <div class="col-xs-6 col-sm-4">
          <li class="one_quarter">
            <article><a href="#"><i class="icon btmspace-30 fa fa-leaf"></i></a>
              <h6 class="heading font-x1">A lacinia imperdiet</h6>
            </article>
          </li>
        </div>
          <div class="col-xs-6 col-sm-4">
          <li class="one_quarter">
            <article><a href="#"><i class="icon btmspace-30 fa fa-assistive-listening-systems"></i></a>
              <h6 class="heading font-x1">Lacinia in et odio</h6>
            </article>
          </li>
        </div>
          <div class="col-xs-6 col-sm-4">
          <li class="one_quarter">
            <article><a href="#"><i class="icon btmspace-30 fa fa-ravelry"></i></a>
              <h6 class="heading font-x1">Tincidunt arcu</h6>
            </article>
          </li>
        </div>
     </div>   
    </ul>
    <!-- ################################################################################################ -->
위 소스 입니다.

 

고수님들 잘 부탁 드립니다.

이 질문에 댓글 쓰기 :

답변 1

질문이 이해가 안가서 그러는데

 

"

이걸 수평으로 첫번째는3개 

두번째것은 4개씩 모바일로 나오게  하고싶거든요.

"

 

이게 어떤 뜻인가요??

답변을 작성하시기 전에 로그인 해주세요.
전체 59,285
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT