Question

我正试图建立一个网站来显示抽搐频道。为此，我嵌入了频道和聊天记录。我也放徽标。但是，由于聊天比播放器更远，徽标不能直接位于播放器下方。我知道您可以允许徽标放在桌子下面，但是那让我头疼，所以我想知道是否存在另一种将徽标直接放在播放器下方的方法。网站：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>

Answer 1

因此您忘记了用<iframe>关闭第一个</iframe>标签。然后，您可以使用<div></div>容器包装不同的内容，以创建清晰的结构并添加适当的对齐方式。我为您做了一个小提琴，向您展示了如何做到这一点：

https://jsfiddle.net/NicolasDurant/xp9wf8t6/

如果您可以将样式从HTML文件中提取到单独的CSS文件中，那么这也很好，因此您可以将所有样式都放在一个地方。

有很多对齐容器的可能性。我用了flexbox。这是有关此内容的完整指南：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

引导程序和默认组件最常用的库之一是引导程序，您应该尝试一下： https://getbootstrap.com/

如何在没有表格的情况下做表格一样的格式

1 个答案: