Metro Tile样式CSS
Metro Tile样式CSS
提问于 2014-08-28 17:06:28
我正在尝试使用div创建metro瓦片样式。
这是我的标记
<div class="tile-tables">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>这是我的CSS
.tile-tables {
height: 270px;
width: 100%;
margin: 0 auto;
background: Red;
overflow: auto;
}
.tile-tables > div {
width: 240px;
height: 240px;
background: green;
display: inline-block;
float: left;
margin: 5px;
}但问题是，如果瓷砖到达行尾，它将转到新行。
我想要的是块将只有1行水平和滚动条只在水平
单击此处查看预览http://www.cssdesk.com/uUtBM
如有任何帮助，将不胜感激..
提亚
回答 1
Stack Overflow用户
发布于 2014-08-28 17:45:31
好的，你要做的主要方法就是像前面的答案一样。然而，如果你想在主div中添加更多的div，你必须不断地改变主div的宽度，这不是一个大问题，但是如果你希望它是动态的，可以试试这个：
HTML
<body onload="setwidth()">
<div class="tile-tables">
<div id="tilesinside">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</body>CSS
.tile-tables{
height: auto;
width: 100%;
margin: 0 auto;
background: Red;
overflow-x: scroll;
overflow-y: hidden;
}
#tilesinside{
height: 280px;
}
#tilesinside > div {
width: 270px;
height: 270px;
background: green;
margin-left: 5px;
margin-right: 0px;
margin-top: 5px;
margin-bottom: 5px;
display: inline-block;
}Javascript
<script>
function setwidth(){
var parentdiv = document.getElementById("tilesinside");
var amountofdivs = parentdiv.getElementsByTagName("div").length;
var widthset = amountofdivs * 280;
document.getElementById("tilesinside").style.width = widthset + "px";
}
</script>如果可以的话？我知道它不是纯粹的CSS和HTML，但它会计算"tilesinside“div中有多少div，然后将该变量乘以280 ( tiles的宽度加上边距)。如果你真的想要你自己，你可以在瓦片乘以变量之前放入代码来获得瓦片的宽度。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25544893
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号