【发布时间】：2017-05-06 17:34:12
【问题描述】：
这是我目前拥有的： 您可以看到问题出在卡片 - 列的顺序上。我已将它们设置为 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>
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>`
您不必使用我的代码。如果您可以创建具有上图效果的空卡片或列，那就太棒了！
【问题讨论】：
标签： html twitter-bootstrap multiple-columns materialize