#css #html
#css #HTML
Вопрос:
В настоящее время я изучаю HTML / CSS, я хочу создать блог в стиле Windows 8 (стиль metro). Но у меня проблема с отключением переполнения. Я использую таблицу в <body> формате html с фиксированным размером данных каждой таблицы. Но всякий раз, когда я добавляю ячейку в строку в таблице, если строка переполняется в направлении x, эта ячейка автоматически прыгает вниз.
Есть ли способ избежать этого?
это часть моего кода:
CSS:
/***Creating the dashboard in metro style***/
.dashboard {
position: fixed;
top: 10.5em;
left: 0;
padding-top: 1em;
padding-left: 1em;
padding-bottom: 1em;
border: 5px solid white;
overflow-x: scroll;
overflow-y:hidden;
}
td {
border: 3px solid yellow;
float: left;
margin: 0;
color: black;
width: 300px;
font-size: 1.5em;
cursor: pointer;
position: relative;
background-color: white;
}
.tile-1{
background-color: #56d9c9;
color: white;
}
HTML:
<div class="dashboard">
<table style="border: 1px solid red">
<tr>
<td><p>I just got you babe 1</p></td>
<td><p>I just got you babe 2</p></td>
<td><p>I just got you babe 3</p></td>
<td><p>I just got you babe 4</p></td>
<td><p>I just got you babe 5</p></td>
<td><p>I just got you babe 6</p></td>
</tr>
<tr>
<td><p>I just got you babe 7</p></td>
<td><p>I just got you babe 8</p></td>
<td><p>I just got you babe 9</p></td>
<td><p>I just got you babe 10</p></td>
<td><p>I just got you babe 11</p></td>
<td><p>I just got you babe 12</p></td>
</tr>
<tr>
<td><p>I just got you babe 13</p></td>
<td><p>I just got you babe 14</p></td>
<td><p>I just got you babe 15</p></td>
<td><p>I just got you babe 16</p></td>
<td><p>I just got you babe 17</p></td>
<td><p>I just got you babe 18</p></td>
<td><p>I just got you babe 19</p></td>
<td><p>I just got you babe 20</p></td>
</tr>
</table>
</div>
Комментарии:
1. В каждой строке должно быть одинаковое количество столбцов. Если вы не хотите столько же, сколько вы должны использовать
colspanна них.2. Что вам нужно, так это макет таблицы , а не
table.3. Это неподходящее использование для таблицы, таблица и связанные с ней элементы предназначены для отображения табличных данных. Вы также неправильно понимаете механику компоновки таблиц (что достаточно справедливо, это может немного сбивать с толку).
4. Вы НЕ МОЖЕТЕ запретить автоматическое изменение размера таблицы в соответствии с ее содержимым. Это свойство таблиц, иногда удобное, иногда не очень.. Я думаю, вам придется заменить вашу таблицу пользовательской div-сеткой или чем-то в этом роде
Ответ №1:
Вам нужен табличный макет, а не таблицы. Таблицы используются для табличных данных, а не для макетов.
Сказав это, вы можете легко добавлять больше блоков, не прерывая горизонтальную прокрутку, не внося особых изменений в свой мысленный макет. Вот пример:
Демонстрация: http://jsfiddle.net/abhitalks/HSE4e/2 /
HTML:
Остается похожим на ваш макет, с той лишь разницей, что вместо таблиц, строк и ячеек у вас есть div s.
<div class="wrap"> <!-- wrapper to contain the layout -->
<div class="table"> <!-- this holds your blocks and scrolls -->
<div class="row"> <!-- this allows you multiple rows -->
<div class="content"></div> <!-- actual content -->
<div class="content"></div>
</div>
<div class="row">
<div class="content"></div> <!-- by having rows, -->
<div class="content"></div> <!-- you can have differing number of.. -->
<div class="content"></div> <!-- ..content blocks in each row -->
</div>
...
</div>
</div>
CSS:
* {
margin: 0; padding: 0; box-sizing: border-box; /* reset */
}
html, body {
overflow: hidden;
width: 100%; /* restrict the page width to viewport */
}
.wrap {
width: 100%; height: 200px; /* restrict width to viewport */
overflow-y: hidden; /* hide vertical scrollbar */
overflow-x: scroll; /* show only horizontal scrollbar */
}
.table {
width: 1000px; /* arbitrarily high width to allow scroll */
height: 100%; /* restrict height to the container */
}
.row {
margin: 8px 8px; /* visually separate rows */
}
.content {
display: inline-block; /* make content blocks flow inline */
width: 100px; height: 50px; /* any height/width you want */
margin: 0px 8px; /* visually separate content blocks */
}
Итак, используя ту же ментальную модель, что и у вас, просто подумайте о CSS, а не о таблицах.
При таком расположении у вас может быть разное количество блоков содержимого в каждой строке. У вас может быть столько строк, сколько вы можете разместить на доступной высоте.
Используя Javascript, вы также можете управлять колесом мыши для прокрутки по горизонтали.
Ответ №2:
вы должны установить width и height для вашего table !
Смотрите это на Jsfiddle
CSS:
.dashboard {
position: fixed;
top: 10.5em;
left: 0;
max-height:180px;
width:500px;
padding-top: 1em;
padding-left: 1em;
padding-bottom: 1em;
border: 5px solid white;
overflow-x:scroll;
}
table{
height:200px;
width:10000px;
}
td {
border: 3px solid yellow;
margin: 0;
color: black;
width: 300px;
font-size: 1.5em;
cursor: pointer;
margin:2px;
display:inline-block;
background-color: white;
}
.tile-1{
background-color: #56d9c9;
color: white;
}
Ответ №3:
Вам нужно переосмыслить весь свой подход к проблеме, поскольку, как указано выше, использование таблицы семантически и концептуально неверно. К счастью, есть много информации о создании сайтов с горизонтальной прокруткой, например, ознакомьтесь http://css-tricks.com/how-to-create-a-horizontally-scrolling-site /.