Отображение двух элементов рядом в html

avatar
Legacy Coding
8 августа 2021 в 23:39
121
2
0

Я пытаюсь встроить twitch-поток на веб-сайт, а чат отдельно, поэтому между ними есть зазор, однако я не могу сделать так, чтобы встраивание и iframe располагались рядом друг с другом.

Я использовал w3schools в качестве руководства по большинству тегов/атрибутов HTML/CSS и уже знал о некоторых методах отображения, поэкспериментировав с ними. https://www.w3schools.com/css/css_display_visibility.asp

Я пытался использовать display: inline и display: inline-block, и ни один из них не работал.

HTML:

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/twitch.css">
    <title>Home</title>
  </head>
  <body>
    <div id="twitch-vid"></div>
    <iframe class="twitch-chat" src="https://www.twitch.tv/embed/DanHowe0/chat?parent=netninjatutorial.danhowe.repl.co"
        height="480"
        width="30%">
    </iframe>

    <!-- Load the Twitch embed JavaScript file -->
    <script src="https://embed.twitch.tv/embed/v1.js"></script>

    <!-- Create a Twitch.Embed object that will render within the "twitch-embed" element -->
    <script type="text/javascript">
      new Twitch.Embed("twitch-vid", {
        width: "60%",
        height: 480,
        channel: "DanHowe0",
        layout: "video"
      });
    </script>
  </body>
</html>

css/twitch.css

body {
  background-color: #000;
}

.twitch-vid {
  display: inline;
}

.twitch-chat {
  display: inline;
}

Источник

Ответы (2)

avatar
Professor Abronsius
9 августа 2021 в 09:37
0

Если вы установите для свойства display значение inline-block, а для margin значение auto с помощью float:none, вы сможете совместить эти элементы, как вы пытались сделать. Использование calc может помочь определить правильный размер, если, как здесь, элементы имеют рамку, хотя граница была просто для иллюстрации границ каждого объекта на странице.

new Twitch.Embed( "twitch-vid", {
  width: "60%",
  height: 480,
  channel: "DanHowe0",
  layout: "video"
});
body {
  background:black;
  margin:0;
  padding:0;
  box-sizing:content-box;
}

.twitch-vid,
.twitch-chat {
  border:1px solid white;
  margin:auto;
  height:480px;
  float:none;
  display:inline-block;
}


.twitch-vid{
  max-width:calc( 60% - 4px);
  width:calc( 60% - 4px);
}
.twitch-chat{
  max-width:calc( 40% - 4px);
  width:calc( 40% - 4px);
}
<script src="//embed.twitch.tv/embed/v1.js"></script>

<div id='twitch-vid' class="twitch-vid"></div>
<iframe
  id="twitch-chat"
  class="twitch-chat" 
  src="//www.twitch.tv/embed/DanHowe0/chat?parent=netninjatutorial.danhowe.repl.co">
</iframe>
avatar
danial hadi
9 августа 2021 в 07:11
0

попробуйте гибкий дисплей

body {
  display: flex;
  flex_direction: row;
  justify_content: space_between:
  width: 100wh;
}

.twitch-vid {
  display: flex;
}

.twitch-chat {
  display: flex;
}