Metro 平铺样式 CSS答案

【问题标题】：Metro Tile Style CSSMetro 平铺样式 CSS
【发布时间】：2014-08-28 09:06:28
【问题描述】：

我正在尝试使用 div 创建 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;
}

但问题是，如果图块到达行尾，它将转到新行。

我想要的是块将只有 1 行水平和滚动条只在水平

点击这里预览http://www.cssdesk.com/uUtBM

任何帮助将不胜感激..

TIA

【问题讨论】：

标签： html css metro-ui-css

【解决方案1】：

好的，因此您执行此操作的主要方式就像之前的答案状态一样。但是，如果您想在主 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（图块的宽度加上边距）。如果你真的想要你，你可以在它乘以变量之前输入代码来获取磁贴的宽度。

【讨论】：

如果您通过这样的 javascript 进行操作，则不需要内部父级...
我更多的是想用inner parent来增加outer parent上的水平滚动？
这取决于他想在哪里滚动，内部父级将滚动外部Div，外部父级将滚动整个页面。

【解决方案2】：

您应该将所有要水平对齐的 div 包装在一个 div 中，该 div 的总宽度是所有水平 div 的总宽度。

然后把这个 div 放到 .tile-tables 里面，它的宽度是:100%; /最大宽度：700px；有溢出：自动；

此处的示例 CSS 代码：

.tile-tables {
    height: 250px;
    width:100%;
    max-width:700px;
    margin: 0 auto;
    background: Red;
    overflow:auto;
}

.tile-tables .extra-div{
    width:2500px;
    height:250px;
}

.tile-tables .extra-div > div {
    position:relative;
    width: 240px;
    height: 240px;
    background: green;
    display: inline-block;
    float: left;
    margin: 5px;
}

jsFiddle

【讨论】：

我需要将宽度固定为 700px，这样底部才会有滚动条..
nah.. 我无法设置 2500px .. 因为我不知道那里有多少瓷砖