实现卡片 - 列平行顺序
好的家伙这就是我想要的效果：
这就是我目前所拥有的：
您可以看到问题出在卡片的顺序 - 列。我已经将它们设置为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>`
您不必使用我的代码。如果您可以创建具有上图中影响的空卡片或列，那就太棒了！
2 个答案:
答案 0 :(得分：2)
这是我的解决方案，我编辑了你的代码
＆＃13;
＆＃13;
＆＃13;
＆＃13;
//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>
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>
<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列，所以我将卡片1放入12列，然后在卡片3旁边放置12列（12 + 12 = 24这些列以一行排成两行的方式相互推动）
答案 1 :(得分：0)
您可以使用float，absolute positioning或flex。这是flexbox的一种方法：
＆＃13;
＆＃13;
＆＃13;
＆＃13;
.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>
阅读（和书签）这两篇文章：
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？