如何使用Materialise Design设置五列? [英] How to set five column in row with Materialize Design?
本文介绍了如何使用Materialise Design设置五列?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在为响应的html页面使用物化设计框架.我们可以轻松地连续管理2、3、4列.但是现在我想连续显示5列.
I am using materialize design framework for responsive html page. We can easily manage 2, 3, 4 column in a row. But right now i want to show 5 column in a row.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
<div class="container">
<div class="row">
<div class="col l3">
<img src="https://d2z4fd79oscvvx.cloudfront.net/0023640_black_forest_cake_205.jpeg">
</div>
<div class="col l3">
<img src="https://d2z4fd79oscvvx.cloudfront.net/0023640_black_forest_cake_205.jpeg">
</div>
<div class="col l3">
<img src="https://d2z4fd79oscvvx.cloudfront.net/0023640_black_forest_cake_205.jpeg">
</div>
<div class="col l3">
<img src="https://d2z4fd79oscvvx.cloudfront.net/0023640_black_forest_cake_205.jpeg">
</div>
<div class="col l3">
<img src="https://d2z4fd79oscvvx.cloudfront.net/0023640_black_forest_cake_205.jpeg">
</div>
<div class="col l3">
<img src="https://d2z4fd79oscvvx.cloudfront.net/0023640_black_forest_cake_205.jpeg">
</div>
<div class="col l3">
<img src="https://d2z4fd79oscvvx.cloudfront.net/0023640_black_forest_cake_205.jpeg">
</div>
</div>
</div>
我想连续显示五个图像.
I want to show five image in a row.
推荐答案
尝试使用此HTML和CSS ...
Try this HTML and CSS for it...
HTML:-
<div class="row-cover"><div class="row-wrap"><div class="row">
<div class="col s2 offset-s1">1</div>
<div class="col s2">2</div>
<div class="col s2">3</div>
<div class="col s2">4</div>
<div class="col s2">5</div>
</div></div></div>
CSS:-
.row-cover { overflow: hidden; }
.row-wrap { margin: 0 -8.33333%; }
@media only screen and (max-width: 767px) {
.row-wrap { margin: 0; }
}
这个想法将为您服务,只要您同意,您就可以更改大,中,小屏幕的响应速度...
This idea will work for you, you can change the responsiveness for large, medium and small screens as far as your requirement is consent...
这篇关于如何使用Materialise Design设置五列?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文