수평정렬

Amina Q & A

아미나 질답게시판

홈 > 아미나 > 질답/버그/제안
질답/버그/제안

수평정렬

5 고래 1 63

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

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

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

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

고수님들 도와 주세요.

ea1a857567768174a59e6f6daac41da4_1593762027_7582.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>
  <!-- ################################################################################################ -->
위에는 사용한 소스입니다..

 

 

 

ea1a857567768174a59e6f6daac41da4_1593762011_7203.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 Comments
M 한별아빠 07.04 02:09  
1. 음... 문법(구조)에 맞지 않기 때문에 아래와 같은 코드는 정상작동하지 않습니다.ㅠㅠ

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

2. div 로 구조를 짤거면 다 div 로, ul 로 구조를 짤꺼면 ul, li 로 구조부터 다시 잡으셔야 할 듯...

3. 그 외 나머지는 부트스트랩 그리드시스템의 칼럼 문제일 뿐이니... 원하시는 반응구조 대로 칼럼 지정해 주시면 될 것 같네요.

http://bootstrapk.com/css/#grid
제목
최근 글
최근 댓글
Facebook Twitter GooglePlus KakaoStory KakaoTalk NaverBand