Metro Tile Style CSS

Я пытаюсь создать стиль плитки метро с дивамиMetro Tile Style 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

Любая помощь будет оценена ..

ТИА

источник

2014-08-28 Vincent Dagpin

Вы должны обернуть все 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

Мне нужно иметь ширину, закрепленную на 700 пикселей, чтобы внизу была полоса прокрутки. –

Простите, я отредактирую свой ответ – Bokdem

nah .. Я не могу установить этот 2500px .. потому что я не хочу знаете, как там могут быть плитки –

Итак, главным образом вы могли бы сделать это как предыдущие состояния ответа. Однако, если вы хотите добавить больше 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, но он подсчитывает, сколько divs находится внутри div «tilesinside», а затем умножает переменную на 280 (ширина вашей плитки плюс поля). Если вы действительно хотели, вы могли бы ввести код, чтобы получить ширину плитки, прежде чем она умножит эту переменную.

источник

2014-08-28 09:45:31 Benjamin

Вам не понадобится внутренний родитель, если вы делаете это через javascript, подобный этому ... –

Я больше думал об использовании внутреннего родителя для увеличения горизонтального прокрутки внешнего родителя? – Benjamin

Это зависит от того, где он хочет иметь свиток, внутренний родитель будет прокручивать внешний Div, внешний родитель будет прокручивать всю страницу. – Benjamin

Metro Tile Style CSS

ответ

Смежные вопросы