반응 형 디자인으로이 UI 디자인을 수행하는 html과 CSS 구성 방법

-1

html + css로 변환해야하는 디자인이 있으며 모든 화면 크기에서 작동하도록하려면 응답 성이 필요합니다.
초기 UI는 다음과 같이이다 :
다음 enter image description here
때이 같은이 아래의 세부 사항 컨테이너를 확장해야 이러한 상자 중 하나에 사용자가 클릭 :
반응 형 디자인으로이 UI 디자인을 수행하는 html과 CSS 구성 방법

그리고 화면은 모바일 장치에서 작은 얻을 때 예를 들어, 그것은 다음과 같이한다 :이 상자의
enter image description here

각 상자는 다른 세부 사항 컨테이너를 열어야 할 때에 사용자가 클릭.

내가 한 일은 상자의 각 행을 새로운 ul 요소에 넣고 각 ul 뒤에는 세부 컨테이너가있는 새로운 ul을 넣고 js를 사용하여 올바른 세부 컨테이너를 엽니 다.
지금 직면하고있는이 문제는 작은 화면에서 발생합니다. 사용자가 상자를 클릭하면 다섯 번째 요소 다음에 세부 정보가 표시되고 이것이 올바르지 않습니다. enter image description here

또한 나는 각각의 세부 용기와 쇼 클릭을 상자 안에 넣어하려고했으나 문제는 그 다음과 같이 나타납니다 : 나는 그래서 만약이 디자인에 대해 잘못 생각하고 enter image description here

솔기
누군가가 이것을 달성하기위한 예제 나 아이디어를 가지고 있다면 조언을 구하십시오.

HTML은 내가 쓴 :

<div class="everything"> 
     <ul class="services-row"> 
      <li class=""> 
       <div> 
        <a href="#">1</a> 
        <i></i> 
       </div> 
      </li> 
      <li class=""> 
       <div> 
        <a href="#">2</a> 
        <i></i> 
       </div> 
      </li> 
      <li class=""> 
       <div> 
        <a href="#">3</a> 
        <i></i> 
       </div> 
      </li> 
      <li class=""> 
       <div> 
        <a href="#">4</a> 
        <i></i> 
       </div> 
      </li> 
      <li class=""> 
       <div> 
        <a href="#">5</a> 
        <i></i> 
       </div> 
      </li> 
     </ul> 
     <div class="service-content"> 
      <div class=""> 
       <i class="closeService">X</i> 
       <p> 
        <img class="pull-left" style="margin-right:20px;" src="#" /> 
        <span>Details</span> 
        Some Details 
       </p> 
      </div> 
      <div class=""> 
       <i class="closeService">X</i> 
       <p> 
        <img class="pull-left" style="margin-right:20px;" src="#" /> 
        <span>Details</span> 
        Some Details 
       </p> 
      </div> 
      <div class=""> 
       <i class="closeService">X</i> 
       <p> 
        <img class="pull-left" style="margin-right:20px;" src="#" /> 
        <span>Details</span> 
        Some Details 
       </p> 
      </div> 
      <div class=""> 
       <i class="closeService">X</i> 
       <p> 
        <img class="pull-left" style="margin-right:20px;" src="#" /> 
        <span>Details</span> 
        Some Details 
       </p> 
      </div> 
      <div class=""> 
       <i class="closeService">X</i> 
       <p> 
        <img class="pull-left" style="margin-right:20px;" src="#" /> 
        <span>Details</span> 
        Some Details 
       </p> 
      </div> 
     </div> 
     <ul class="services-row even"> 
      <li class=""> 
       <div> 
        <a href="#">6</a> 
        <i></i> 
       </div> 
      </li> 
      <li class=""> 
       <div> 
        <a href="#">7</a> 
        <i></i> 
       </div> 
      </li> 
      <li class=""> 
       <div> 
        <a href="#">8</a> 
        <i></i> 
       </div> 
      </li> 
      <li class=""> 
       <div> 
        <a href="#">9</a> 
        <i></i> 
       </div> 
      </li> 
      <li class=""> 
       <div> 
        <a href="#">10</a> 
        <i></i> 
       </div> 
      </li> 
     </ul> 
     <div class="service-content"> 
      <div class=""> 
       <i class="closeService">X</i> 
       <p> 
        <img class="pull-left" style="margin-right:20px;" src="#" /> 
        <span>Details</span> 
        Some Details 
       </p> 
      </div> 
      <div class=""> 
       <i class="closeService">X</i> 
       <p> 
        <img class="pull-left" style="margin-right:20px;" src="#" /> 
        <span>Details</span> 
        Some Details 
       </p> 
      </div> 
      <div class=""> 
       <i class="closeService">X</i> 
       <p> 
        <img class="pull-left" style="margin-right:20px;" src="#" /> 
        <span>Details</span> 
        Some Details 
       </p> 
      </div> 
      <div class=""> 
       <i class="closeService">X</i> 
       <p> 
        <img class="pull-left" style="margin-right:20px;" src="#" /> 
        <span>Details</span> 
        Some Details 
       </p> 
      </div> 
      <div class="" > 
       <i class="closeService">X</i> 
       <p> 
        <img class="pull-left" style="margin-right:20px;" src="#" /> 
        <span>Details</span> 
        Some Details 
       </p> 
      </div> 
     </div> 
    </div>

그리고 전체 샘플 : http://jsfiddle.net/J2w4T/2/

출처

2014-04-30 Amr Elgarhy

직접 시도하지 않으셨습니까? – Kermit

JSFiddle에 세부 사항을 추가 할 수 있습니까? 어떤 상호 작용을 위해 불충분하고 깨진 구조가있는 것 같습니다. –

업데이트 : http://jsfiddle.net/J2w4T/2/ –

첫째, 당신이 대신 표시 대신 숫자 이름, 그리고 두 번째 질문과 관련, 당신이 인 flexbox을 사용할 수 있습니다 설명 클래스 이름을 사용할 수 있습니다 테이블과 플로트, 나는

ul { 
     display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ 
     display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ 
     display: -ms-flexbox; /* TWEENER - IE 10 */ 
     display: -webkit-flex; /* NEW - Chrome */ 
     display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ 
}

이 코드는 저 작은이,이 바이올린 http://jsfiddle.net/7FLnL/4/에이 코드의 구현 작업 마지막 항목의 버그가 있지만 수정할 수없는 것은 아닙니다.

출처

2014-04-30 09:34:48 xzegga

반응 형 디자인으로이 UI 디자인을 수행하는 html과 CSS 구성 방법

답변

관련 문제