#html #html-table
#HTML #html-таблица
Вопрос:
У меня есть несколько разделов, которые я использую для инкапсуляции некоторых графиков. Прямо сейчас я использую таблицу для выравнивания моих разделов следующим образом:
<table>
<tr>
<td>
<div> My stuff </div>
</td>
<td>
<div> My stuff </div>
</td>
</tr>
</table>
Однако, когда мой экран меньше, я хочу, чтобы это стало двумя строками, в которых расположены мои divs. Есть ли элегантный способ сделать это?
Прямо сейчас у меня также есть боковое меню на моей странице, поэтому на маленьком экране сначала появляется боковое меню, а затем моя таблица помещается под ним. Вместо этого я хочу, чтобы мое боковое меню было слева, а мои разделы справа. Должен ли я также добавить свое боковое меню в таблицу?
Комментарии:
1. Читайте о медиа-запросах и адаптивном веб-дизайне
2. @Jost прав, для того, о чем вы говорите, потребуется адаптивный веб-дизайн. blog.teamtreehouse.com/beginners-guide-to-responsive-web-design . В принципе, у вас разные правила в вашей таблице стилей для разных размеров экрана.
3. Я видел, где я мог бы изменить свой css, используя типы носителей. Однако это позволило бы мне применять стили в зависимости от размера окна. Как я мог бы использовать css для перестановки всей таблицы?
Ответ №1:
вы можете просто стилизовать свои divs так, чтобы они плавали влево и относительно наследовали ширину первого div в качестве поля для следующего div
<div class="firstdiv">My Stuff 1 </div>
<div class="seconddiv"> My Stuff 2</div>
И в вашем стиле сделайте что-то вроде
.firstdiv{
float:left;
}
.secondiv{
float:left;
margin:auto
}
Это тоже будет реагировать. Надеюсь, это поможет
2 О боковом меню
Теперь заключите ваши divs в контейнер div и примените тот же описанный выше метод, рассматривая боковое меню ur как первый div, а контейнер stuf как seconddiv