我正在尝试使用 divs 创建 metro tile 样式
这是我的标记
<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;
}
但问题是，如果磁贴到达行尾，它将转到新行。
我想要的是 block 水平只有 1 行，滚动条只在水平方向
点击这里预览http://www.cssdesk.com/uUtBM
任何帮助将不胜感激..
TIA
最佳答案
好的，所以您执行此操作的主要方式与之前的答案状态一样。然而，如果你想在主 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(瓷砖的宽度加上边距)。如果你真的想要你，你可以在乘以变量之前放入代码以获取图 block 的宽度。
关于html - 地铁瓷砖样式 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25544893/