0
好球员，这是我想要的效果： 
Materialise的卡 - 列并行顺序
这是我目前有： 
你可以看到，问题是出牌的顺序 - 列。我已经将它们设置为7和5，，但是在卡3完成时卡2不会启动。
如何获得如图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>
a)
<input type="checkbox" id="odg1" class="myCheckbox" />
<label for="odg1" style="color:black;"> Tekstualni opis ponuđenog odgovora a)</label>
</p>
<p>
b)
<input type="checkbox" id="odg2" class="myCheckbox" />
<label for="odg2" style="color:black;"> Tekstualni opis ponuđenog odgovora b)</label>
</p>
<p>
c)
<input type="checkbox" id="odg3" class="myCheckbox" />
<label for="odg3" style="color:black;"> Tekstualni opis ponuđenog odgovora c)</label>
</p>
<p>
d)
<input type="checkbox" id="odg4" class="myCheckbox" />
<label for="odg4" style="color:black;"> Tekstualni opis ponuđenog odgovora d)</label>
</p>
<p>
e)
<input type="checkbox" id="odg5" class="myCheckbox" />
<label for="odg5" style="color:black;"> Tekstualni opis ponuđenog odgovora e)</label>
</p>
<p>
f)
<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>`
您不必使用我的代码。如果您可以创建如上图所示的具有影响的空卡或列，那将非常棒！
这为我工作！谢谢@SouhailBenSlimene – IkePr
你能解释一下你是如何达到这个效果的？你是如何安排专栏的？ @SouhailBenSlimene – IkePr
我编辑我的答案，希望你明白，如果不让我知道。 –