地鐵瓷磚樣式CSS

地鐵瓷磚的風格，這是我的標記

<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

來源

2014-08-28 Vincent Dagpin

你應該將所有你想要水平對齊的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

來源

2014-08-28 09:15:56 Bokdem

我需要有一個寬度固定爲700px，這樣就會有一個滾動條在底部.. – 2014-08-28 09:17:23

對不起，我會編輯我的答案 – Bokdem 2014-08-28 09:27:17

恩..我不能設置2500px ..因爲我沒有知道瓷磚如何可能有 – 2014-08-28 09:41:04

好了，你可以這樣做的主要途徑是像以前的答案的狀態。但是，如果您想要在主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（您的tile的寬度加邊距）。如果你真的想要你，你可以將代碼放入瓦片中，然後再乘以變量。

來源

2014-08-28 09:45:31 Benjamin

你不需要內部父母，如果你正在通過JavaScript這樣做... – 2014-08-28 09:51:52

我更想使用內部父母來增加外部父級的水平滾動？ – Benjamin 2014-08-28 09:56:30

這取決於他想要在哪裏滾動，內部父母將滾動外部Div，外部父母將滾動整個頁面。 – Benjamin 2014-08-28 10:01:13

地鐵瓷磚樣式CSS

回答

相關問題