Question

我正在尝试使用divs

创建地铁图块样式

这是我的标记

<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

Answer 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，但它计算了＆＃34; tilesinside＆＃34;中有多少div。 div然后将变量乘以280，（瓷砖的宽度加上边距）。如果你真的想要你，你可以放入代码以获得瓦片的宽度，然后再将变量乘以。

Answer 2

你应该将你想要水平对齐的所有div包裹在一个div中，该div的所有水平div的总宽度在一起。

然后将此div放在.tile-tables中，其宽度为100％; / max-width：700px;溢出：auto;

此处的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

Metro Tile Style CSS

2 个答案: