0

我正在尝试使用 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

4

2 回答 2

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（图块的宽度加上边距）。如果你真的想要你，你可以在它乘以变量之前输入代码来获取磁贴的宽度。

于 2014-08-28T09:45:31.493 回答
0

您应该将所有要水平对齐的 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

于 2014-08-28T09:15:56.363 回答