时间戳

首页 > 解决方案 > 将段落文本放在 youtube 视频旁边？

css - 将段落文本放在 youtube 视频旁边？

问题描述

任何人都知道如何放置一个

在 youtube 视频旁边添加标签，而不会在边框和视频之间垂直创建额外的行间距？就像我试图将文本放在第一个视频的右侧，但它不断在视频和显示视频的边框之间留出额外的空间。

<!DOCTYPE html
<html lang="en">
<meta charset="UTF-8">
<head>
<title>007 Nightfire | Videos</title>
</head>
<style>
.div1 {
    background-color:#77BFC7;
    text-align:center;
    font-size:50px;
    border:1px solid #77BFC7;
    height:70px;
    font-weight:bold;
}
body {
    background-color:#00AAFF;
}
hr {
    height:0px;
    background-color:#000000;
    border:solid;
}
</style>
<body>
<div class="div1">
Videos
</div>
<center>
<iframe width="520" height="300" 
src="https://www.youtube.com/embed/7TVYA_o5Fsw" allowfullscreen style="position:relative; top:5px; right:360px;">
</iframe>
<br>
<br>
<hr>
<iframe width="520" height="300"
src="https://youtube.com/embed/XZMtPu35UT8" allowfullscreen style="position:relative; top:10px; left:350px;">
</iframe>
</body>
</html>

标签： css

解决方案

您只需要一个具有内联样式的 div，并将文本浮动到右侧。我还建议将中心标签更改为 div，因为它不是推荐的 HTML5 居中方式。

.div1 {
  background-color: #77BFC7;
  text-align: center;
  font-size: 50px;
  border: 1px solid #77BFC7;
  height: 70px;
  font-weight: bold;
}

body {
  background-color: #00AAFF;
}

hr {
  height: 0px;
  background-color: #000000;
  border: solid;
}
<div class="div1">
  Videos
</div>
<center>
  <div style="display: inline-block;">
    <iframe width="520" height="300" src="https://www.youtube.com/embed/7TVYA_o5Fsw" allowfullscreen style="position:relative; top:5px; right:360px;">
                </iframe>
    <p style="float: right">Text Content Here</p>
  </div>
  <br>
  <br>
  <hr>
  <iframe width="520" height="300" src="https://youtube.com/embed/XZMtPu35UT8" allowfullscreen style="position:relative; top:10px; left:350px;">
            </iframe>
</center>

推荐阅读