Fatal编程技术网
  • html/
  • Html 物化卡片-列并行顺序

Html 物化卡片-列并行顺序

html twitter-bootstrap

Html 物化卡片-列并行顺序,html,twitter-bootstrap,multiple-columns,materialize,Html,Twitter Bootstrap,Multiple Columns,Materialize,好了，伙计们，这就是我想要的效果： 这就是我目前拥有的： 您可以看到问题在于卡片-列的顺序。我已经将它们设置为7和5，但是卡2在卡3完成之前不会启动 我如何实现如图1所示的效果？我试着把它们组合成一行，但那只是把元素放在了另一行下面 这是完整的HTML，我已经用注释标记了这些卡片：` <html> <head> <!--Import Google Icon Font--> <link href="http://fon

好了，伙计们，这就是我想要的效果：

这就是我目前拥有的： 您可以看到问题在于卡片-列的顺序。我已经将它们设置为7和5，但是卡2在卡3完成之前不会启动

我如何实现如图1所示的效果？我试着把它们组合成一行，但那只是把元素放在了另一行下面

这是完整的HTML，我已经用注释标记了这些卡片：`

  <html>
    <head>
      <!--Import Google Icon Font-->
      <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!--Import materialize.css-->
      <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
      <link rel="stylesheet" type="text/css" href="css/style.css">

      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>

    <body>
        <!--navbar-->
        <header>
        <nav>
          <div class="nav-wrapper light-blue darken-3">
            <a href="#" class="brand-logo center">Kviz</a>
            <!--
            <ul id="nav-mobile" class="left hide-on-med-and-down">
              <li><a href="sass.html">test</a></li>
            </ul>
            -->
          </div>
        </nav>
        </header>

        <main>

<!-- THIS IS CARD 1 -->
         <div class="row">
          <div class="col s12 m12 l7 xl7">
            <div class="card">
              <div class="card-image">
                <img src="images/zad1slika.png">
              </div> <p style="padding: 15px; margin-top: -12px;">
              Tekstualni opis pitanja. 
              Na slici je prikazan…. Na slici je prikazan…. Na slici je prikazan…. Na slici je prikazan…. Na slici je prikazan…. Na slici je prikazan…. Na slici je prikazan…. Na slici je prikazan…. Na slici je prikazan…. Na slici je prikazan…. Na slici je prikazan…. Na slici je prikazan…. Na slici je prikazan…. Na slici je prikazan…. Na slici je prikazan…. Na slici je prikazan…. Na slici je prikazan…. Na slici je prikazan….
              </p>
            </div>
          </div>

<!-- THIS IS CARD 3 -->
          <div class="col s12 m12 l5 xl5">
            <div class="card blue-grey darken-1">
              <div class="card-content white-text">
                <span class="card-title">Card Title</span>
                <p>I am a very simple card. I am good at containing small bits of information.
                I am convenient because I require little markup to use effectively. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a .......... TEXT</p>
              </div>
              <div class="card-action">
                <a href="#">This is a link</a>
                <a href="#">This is a link</a>
              </div>
            </div>
          </div>
        </div>

<!-- THIS IS CARD 2 -->
          <div class="row">
              <div class="col s12 m12 l7 xl7">
                <div class="card" style="padding: 15px;">
                  <span class="card-title naslovPrijava">Obeležite jedan odgovor:</span>
                  <form action="#">
                    <div class="selectme">
                      <p>
                        &nbsp; &nbsp; a) &nbsp; &nbsp;
                        <input type="checkbox" id="odg1" class="myCheckbox" />
                        <label for="odg1" style="color:black;"> Tekstualni opis ponuđenog odgovora a)</label>
                      </p>
                      <p>
                        &nbsp; &nbsp; b) &nbsp; &nbsp;
                        <input type="checkbox" id="odg2" class="myCheckbox" />
                        <label for="odg2" style="color:black;"> Tekstualni opis ponuđenog odgovora b)</label>
                      </p>
                      <p>
                        &nbsp; &nbsp; c) &nbsp; &nbsp;
                        <input type="checkbox" id="odg3" class="myCheckbox" />
                        <label for="odg3" style="color:black;"> Tekstualni opis ponuđenog odgovora c)</label>
                      </p>
                      <p>
                        &nbsp; &nbsp; d) &nbsp; &nbsp;
                        <input type="checkbox" id="odg4" class="myCheckbox" />
                        <label for="odg4" style="color:black;"> Tekstualni opis ponuđenog odgovora d)</label>
                      </p>
                      <p>
                        &nbsp; &nbsp; e) &nbsp; &nbsp;
                        <input type="checkbox" id="odg5" class="myCheckbox" />
                        <label for="odg5" style="color:black;"> Tekstualni opis ponuđenog odgovora e)</label>
                      </p>
                      <p>
                        &nbsp; &nbsp; f) &nbsp; &nbsp;
                        <input type="checkbox" id="odg6" class="myCheckbox" />
                        <label for="odg6" style="color:black;"> Tekstualni opis ponuđenog odgovora f)</label>
                      </p>
                    </div>
                    </form>
                </div>
              </div>
            </div>
          </div>



        </main>

        <footer class="page-footer  light-blue darken-4">
          <div class="footer-copyright">
            <div class="container">
            <center> © 2017 VTŠ Apps Team </center>
            </div>
          </div>
        </footer>
      <!--Import jQuery before materialize.js-->
      <script type="text/javascript" src="js/jquery.min.js"></script>
      <script type="text/javascript" src="js/materialize.min.js"></script>

      <script>
      //Near checkboxes
      $('.myCheckbox').click(function() {
          $(this).siblings('input:checkbox').prop('checked', false);
      });


      //Every checkboxes in the page
      $('.selectme input:checkbox').click(function() {
          $('.selectme input:checkbox').not(this).prop('checked', false);
      });  
      </script>
    </body>
  </html>`




Tekstualni opis pitanja。
我是普里卡山…。我是普里卡山…。我是普里卡山…。我是普里卡山…。我是普里卡山…。我是普里卡山…。我是普里卡山…。我是普里卡山…。我是普里卡山…。我是普里卡山…。我是普里卡山…。我是普里卡山…。我是普里卡山…。我是普里卡山…。我是普里卡山…。我是普里卡山…。我是普里卡山…。我是普里卡山…。


卡片标题
我是一张非常简单的卡片。我擅长包含少量信息。
我很方便，因为我需要很少的标记来有效地使用。Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着Aldus PageMaker等桌面出版软件包括Lorem Ipsum的版本而流行。Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着Aldus PageMaker等桌面出版软件包括Lorem Ipsum的版本而流行。Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是业界标准的虚拟文本，当时一家未知的打印机在。。。。。。。。。。正文

Obeležite jedan odgovor：

（a）
Tekstualni opis ponuđeno odgovora a）



（b）
Tekstualni opis ponuđeno odgovora b）



（c）
Tekstualni opis ponuđeno odgovora c）



（d）
Tekstualni opis ponuđeno odgovora d）



（e）
Tekstualni opis ponuđeno odgovora e）



（f）
Tekstualni opis ponuđeno odgovora f）


©2017 VTŠApps团队
//靠近复选框
$（'.myCheckbox'）。单击（函数（）{
$（this）.sides（'input:checkbox'）.prop（'checked'，false）；
});
//页面中的每个复选框
$（'.selectme输入：复选框'）。单击（函数（）{
$（'.selectme输入：复选框'）。不是（此）.prop（'checked'，false）；
});  
`
你不必使用我的代码。如果你能创造出像上面图片一样有效果的空卡片或列，那就太棒了

这是我的解决方案我编辑了你的代码

//复选框附近
$（'.myCheckbox'）。单击（函数（）{
$（this）.sides（'input:checkbox'）.prop（'checked'，false）；
});
//页面中的每个复选框
$（'.selectme输入：复选框'）。单击（函数（）{
$（'.selectme输入：复选框'）。不是（此）.prop（'checked'，false）；
});




Tekstualni opis pitanja。
我是普里卡山…。我是普里卡山…。我是普里卡山…。我是普里卡山…。我是普里卡山…。我是普里卡山…。我是普里卡山…。我是普里卡山…。我是普里卡山…。我是普里卡山…。我是普里卡山…。我是普里卡山…。我是普里卡山…。我是普里卡山…。我是普里卡山…。我是普里卡山…。纳斯莱奇普里克酒店