Materialise 卡 - 列并行顺序

Question

好的，这就是我想要的效果：

这是我目前拥有的：您可以看到问题在于卡片的顺序 - 列。我已将它们设置为 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>`

您不必使用我的代码。如果你能制作出如上图效果的空卡片或栏目，那就太棒了！

Answer 1

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

//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);
      });

<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!--Import materialize.css-->
      <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css"  media="screen,projection"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>
<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>
<div class="row">
  <div class="col s12 l7">
    <!-- THIS IS CARD 1 -->
   <div class="row">
    <div class="col s12">
      <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>
  </div>

  <!-- THIS IS CARD 2 -->
  <div class="row">
      <div class="col s12">
        <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>
  <div class="col s12 l5">
    <!-- THIS IS CARD 3 -->
    <div class="col s12">
      <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>
</div>

        <footer class="page-footer  light-blue darken-4">
          <div class="footer-copyright">
            <div class="container">
            <center> © 2017 VTŠ Apps Team </center>
            </div>
          </div>
        </footer>

全屏是12列，所以我把它分成两列，第一列是7列，第二列是5列。

我在下半场放置了卡片 3，接下来我在上半场创建了一个新行，它变成了 12 列，所以我放置了 12 列的卡片 1，旁边是 12 列的卡片 3 (12 + 12 =24 列以一种将两行排成一行的方式相互推动）

Answer 2

您可以使用浮动、绝对定位或弹性。这是使用 flexbox 的一种方法：

.layout {
  display: flex;
  width: 300px;
}

.card {
  min-height: 50px;
  border: 1px solid #000;
}

.left {
  flex: 7 0;
}

.top,
.bottom {
  flex: 0 0 100%;
}

.right {
  flex: 5 0;
}

<div class="layout">
  <div class="left">
    <div class="card top">Card 1
    </div>
    <div class="card bottom">Card 2
    </div>
  </div>
  <div class="card right">Card 3
  </div>
</div>

阅读（并收藏）这两篇文章：

Materialise 卡 - 列并行顺序

Materialize cards - columns parallel order

html

multiple-columns

materialize

twitter-bootstrap