Как сделать табличный формат без таблиц
Я пытаюсь настроить веб-сайт для отображения twitch-канала. Для этого я встроил канал и чат. Я тоже поставил логотип. Однако, поскольку чат простирается дальше игрока, логотип не может находиться прямо под игроком. Я знаю, что вы могли бы разрешить размещение логотипа под таблицами, но это большая головная боль, поэтому мне было интересно, есть ли другой способ разместить логотип прямо под проигрывателем. Веб-сайт: https://katamonia--449243.repl.co/
<!DOCTYPE html>
<html>
<head>
<title>Katamonia</title>
</head>
<body style = "background-color:#333">
<center>
<iframe align = "top" src = "https://player.twitch.tv/?channel=katamonia" frameborder = "0" allowfullscreen = "true" scrolling = "no" height = "582" width=74%>
<iframe frameborder = "2"
scrolling = "no"
src = "https://www.twitch.tv/embed/katamonia/chat"
height = "100"
width = "100">
</iframe>
<iframe src = "https://www.twitch.tv/embed/katamonia/chat?darkpopout" frameborder = "0" scrolling = "yes" height = "758" width=24%></iframe>
</center>
</br>
<img align = "top" src = "https://static-cdn.jtvnw.net/emoticons/v1/778094/2.0" height = "200" width = "200">
</body>
</html>
Спасибо, что сообщили мне об этом устаревшем теге. Какой CSS мне нужно знать для этого?
Есть так много разных подходов... Ваш вопрос имеет слишком много ответов. Начать исследование: developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/…
Ответы 1
Итак, вы забыли закрыть первый тег <iframe> на </iframe>. Затем вы можете обернуть различное содержимое контейнерами <div></div>, чтобы создать четкую структуру и добавить правильное выравнивание. Я сделал для вас скрипку, которая показывает, как вы можете это сделать:
https://jsfiddle.net/НиколасДюрант/xp9wf8t6/
Также было бы здорово, если бы вы могли извлечь свои стили из файла HTML в отдельный файл CSS, чтобы у вас были все стили в одном месте.
Есть много возможностей для выравнивания контейнеров. Я использовал флексбокс. Вот полное руководство по этому поводу: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Bootstrap — одна из наиболее часто используемых библиотек для аранжировки и компонентов по умолчанию, вам стоит попробовать: https://getbootstrap.com/
Вы бы выиграли от использования CSS. Только HTML будет отображаться только в том порядке, в котором он написан. Кроме того, проведите небольшое исследование выбранного вами HTML-кода, если там есть хотя бы один устаревший/устаревший тег (<center>). Ресурс: developer.mozilla.org/en-US/docs/Web/HTML/…