Jquery Mobile - 동일한 행의 listview에서 여러 항목

Jquery Mobile에 문제가 발생했습니다.Jquery Mobile - 동일한 행의 listview에서 여러 항목

3 개의 열을 사용하여 항목 격자를 표시하려고합니다. 각 새 항목은 이전 항목 옆에 표시하고 세 번째 항목 다음에 새 줄을 시작해야합니다. 의 대신 JSFiddle

하지만 내 항목은 splitButtonList (왼쪽 및 오른쪽 클릭 할 수있는 버튼 레이블 아이콘)에서 항목 수 있습니다

내가 이런 일을하려면, 당신에게 예제를 제공합니다 이전 예제의 블록.

문제는 다음과 같습니다. 아래에 표시된 코드 종류를 사용할 때 각 새 항목은 목록에서와 같이 이전 항목의 맨 아래에 표시됩니다. 3 열 그리드 패턴 JSFiddle을 사용하여 표시 할 수 없습니다.

<body> 
    <div data-role="page" data-theme="c" id="projets"> 
     <div data-role="header" data-position="fixed" data-theme="f" data-tap-toggle="false" id="banniere"> 
    </div> 
    <div data-role="content" id="content"> 
     <div class="ui-grid-b">   
      <ul data-role="listview" data-split-icon="star" data-split-theme="a" class="listview"> 
       <li> 
        <a href="projects.html"> 
         <img src="img/icon/file.png" /> 
         <h3>A label</h3> 
         <p>Another one</p> 
         <p>And finally another one</p> 
        </a> 
        <a href="index.html">Plop</a> 
       </li> 
       <li> 
        <a href="projects.html"> 
         <img src="img/icon/file.png" /> 
         <h3>A label</h3> 
         <p>Another one</p> 
         <p>And finally another one</p> 
        </a> 
        <a href="index.html">Plop</a> 
       </li> 
      </ul> 
     </div><!-- /grid-b --> 
    </div> 
     <div data-role="footer" data-position="fixed" data-theme="f" data-tap-toggle="false" id="footer"> 
     </div> 
    </div> 
</body>

수행 할 작업을 알고 있습니까? 어쩌면 CSS 사용? 어떤 실마리라도 나를 위해 매우 귀중 할 것입니다. 고마워요

출처

2014-07-25 Biloutage

어때요? JSFiddle

당신은 기본적으로 그리드의 3 개 하위 컨테이너 누락되었습니다 :

<div class="ui-grid-b"> 
    <div class="ui-block-a">Listview 1 goes here...</div> 
    <div class="ui-block-b">Listview 2 goes here...</div> 
    <div class="ui-block-c">Listview 3 goes here...</div> 
</div><!-- /grid-b -->

을 그래서, 당신은 당신이 세 가지 목록보기가 필요합니다 볼 수 있습니다.

희망이 도움이됩니다.

출처

2014-07-26 06:21:09 Archon

고마워요, 이것이 제가 찾고 있던 것입니다! 나는 내가 UI 그리드의 행동을 제대로 이해하지 못했을 까봐 걱정된다. – Biloutage

Jquery Mobile - 동일한 행의 listview에서 여러 항목

답변

관련 문제