Сегодня я работал над созданием макета, который выглядит следующим образом:
+----+ +----+ +----+ +----+
| | | | | | | |
+----+ +----+ +----+ +----+
Выглядит просто, но у меня есть некоторые дополнительные характеристики:
- Максимальное количество столбцов (n) должно быть динамическим (эта HTML-страница генерируется во время выполнения).
- Весь набор должен быть горизонтально плавным (они сжимаются настолько, насколько могут, когда окно сужено.
- Весь набор также должен быть центрирован на экране не более чем в n столбцах в одной строке за раз.
- В идеале крайние правые «прямоугольники» опускаются в строку ниже и при необходимости переупорядочиваются, т. Е. Когда окно сужается и n прямоугольников не помещаются на экране.
- Конечно, когда отображается более n элементов, они просто создают дополнительные строки из них.
- Отдельные поля ограничены закругленными углами и могут быть активированы любым действием.
С некоторыми исследованиями (Google + адаптация к примерам, которые я нашел) я смог сделать # 6 так, как хотел, используя divs и css. Однако мне было очень тяжело делать 2-4. Я прошел почти весь путь, но я, по жизни, не мог заставить 2 и 3 работать. 2 было не таким уж большим делом, но 3 было решающим. Я использовал плавающие div для позиционирования и нашел пример сайта , в котором упоминалось использование относительного позиционирования и сдвига влево и т. Д., Чтобы получить его в центре, но в моем случае это просто не работало (хотя пример работает нормально). В моем случае вместо центрирования они начнут в центре и пойдут вправо, делая его комичным, поэтому я не знаю, что я пропустил.
Поработав с этим пару часов, я сделал это с помощью следующего кода примерно за 5 минут:
<simplified code>
max_columns = 3; /* whatever */
html = "<table>";
for i = 1 to num_elements
if i % max_columns eq 1 then
html += "<tr>";
endif
html += "<td>";
html += "<div>my element</div>"; /* This is a complex multi-leveled div */
/* that makes boxes with rounded corners */
html += "</td>";
if i % max_columns eq 0 or i eq num_elements then
html += "</tr>";
endif
endfor
html += "</table>";
</simplified code>
Это удовлетворяет всем моим требованиям, кроме # 4, которое приятно иметь, но не обязательно.
Вопрос: [Как бы вы] / [Есть ли способ] сделать это без использования таблиц?
РЕДАКТИРОВАТЬ : У меня не было возможности внедрить / протестировать любое из возможных решений ниже, так как мне нужно закончить другие аспекты (в течение следующих 5 дней), прежде чем я вернусь к этой проблеме , Мое текущее решение lame (?), Кажется, работает нормально, за исключением требования № 4, поэтому эта проблема сейчас не находится на моем критическом пути. Но я протестирую и скоро отправлю отзыв об этом. Так что я собираюсь оставить этот вопрос открытым до тех пор. Я ценю ответы. Спасибо.
EDIT # 2 : Итак, я попробовал некоторые из приведенных ниже решений, и вот что я придумал:
<html>
<head>
<style>
.box {
width: 19%;
height: 150px;
border: 1px solid black;
display: inline-block;
margin: 3 0 0 0;
}
#center {
text-align: center;
border: 1px solid green;
width: 80%;
height: 85%;
padding: 0 0 0 0;
vertical-align: middle;
margin: 0;
}
.footr{
text-align: center;
border: 1px solid green;
width: 80%;
height: 38px;
padding: 0 0 0 0;
vertical-align: middle;
margin: 0;
}
</style>
</head>
<body style="margin-left:0; margin-top:0; margin-right:3;" >
<div style="background-image: url(x); height: 60; width:131; float:left;"></div>
<div style="background-image: url(x); background-repeat:repeat-x; height:60;"></div>
<div class="clearer"></div>
<center>
<div id="center">
<span class="box" style="float:left;">Blah</span>
<span class="box">Blah</span>
<span class="box">Blah</span>
<span class="box">Blah</span>
<span class="box" style="float:right;">Blah</span><br>
<span class="box" style="float:left;">Blah</span>
<span class="box">Blah</span>
<span class="box">Blah</span>
<span class="box">Blah</span>
<span class="box" style="float:right;">Blah</span><br>
<span class="box" style="float:left;">Blah</span>
<span class="box">Blah</span>
<span class="box">Blah</span>
</div>
<div class="footr">Footer</div>
</center>
</body
</html>
Как вы, вероятно, можете сказать, это решает почти все мои проблемы, за исключением 2/3 (не упоминалось в моем первоначальном вопросе:
- Вертикальное выравнивание всего блока так, чтобы его центр был вертикально
- В горизонтальном ряду я бы хотел, чтобы промежутки прилипали к внешним краям внешнего элемента div с равномерно расположенными между ними элементами div.
- В ряду с менее чем
n промежутками, я бы соврал их, чтобы выстроиться под первые 3 пролета предыдущего ряда.
Я делаю это упражнение исключительно для моего личного "зуда, который просто должен поцарапать", и в свое собственное время. Что касается работы, я уже сделал большую часть этого (экономно), используя таблицы для правильного выравнивания материала.
P.S .: Прошу прощения за некоторые неправильно сформированные HTML, встроенные стили и т. Д. Как только я получу 100% -ное рабочее решение, я очистю его.