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
我編輯我的答案，希望你明白，如果不讓我知道。 –