与YouTube视频并排排列
虽然我理解将两个div并排排列是一个常见的问题，但我有一个问题是让YouTube视频和聊天框彼此相邻。我应该使用跨度，因为这将允许聊天框在与youtube视频相同的空间中正确吗？我还在用HTML学习绳索。这是页面目前的样子：
这是我目前的HTML代码，处理youtube视频的div是类名“youtube-video”，div处理聊天框是“聊天”类
<!DOCTYPE html>
<html>
<head>
<title>Chat</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="header-bar">
<div class="bar"></div>
<div class="dropshadow"></div>
</div>
<div class="DJ-text">Affinity FM DJ Room
<span class="Chat-text">Chat</span>
<div class="DJ-underline"></div>
<div class="Chat-underline"></div></div>
<div class="youtube-video" style="float: left;">
<iframe width="900px" height="500px" src="https://www.youtube.com/embed/2GvIq2SpVFM" frameborder="0" allowfullscreen></iframe>
</div>
<div class="chat" style="float: left; padding: 0px 0px 0px 12px;">
<input type="text" class="chat-name" placeholder="Chat">
<div class="info-rect">Info</div>
<div class="chat-messages"></div>
<textarea placeholder="Join the conversation..."></textarea>
<div class="chat-status">Status: <span>Idle</span></div>
</div>
<script src="http://127.0.0.1:8080/socket.io/socket.io.js"></script>
<script>
(function() {
var getNode = function(s) {
return document.querySelector(s);
},
// Get required nodes
status = getNode('.chat-status span'),
messages = getNode('.chat-messages'),
textarea = getNode('.chat textarea'),
chatName = getNode('.chat-name'),
statusDefault = status.textContent,
setStatus = function(s){
status.textContent = s;
if(s !== statusDefault){
var delay = setTimeout(function(){
setStatus(statusDefault);
clearInterval(delay);
}, 3000);
}
};
//try connection
try{
var socket = io.connect('http://127.0.0.1:8080');
} catch(e){
//Set status to warn user
}
if(socket !== undefined){
//Listen for output
socket.on('output', function(data){
if(data.length){
//Loop through results
for(var x = 0; x < data.length; x = x + 1){
var message = document.createElement('div');
message.setAttribute('class', 'chat-message');
message.textContent = ': ' + data[x].message;
var name=document.createElement('span');
name.setAttribute('class', 'userName');
name.textContent = data[x].name;
message.insertBefore(name, message.firstChild);
//Append
messages.appendChild(message);
messages.insertBefore(message, messages.firstChild);
}
}
});
//Listen for a status
socket.on('status', function(data){
setStatus((typeof data === 'object') ? data.message : data);
if(data.clear === true){
textarea.value = '';
}
});
//Listen for keydown
textarea.addEventListener('keydown', function(event){
var self = this,
name = chatName.value;
if(event.which === 13 && event.shiftKey === false){
socket.emit('input', {
name: name,
message: self.value
});
}
});
}
})();
</script>
</body>
</html>
这是我的youtube视频和聊天的CSS：
body {
background-color: #0f0f17;
margin: 0px;
width: 100%;
}
body,
textarea,
input {
font: 13px "Raleway", sans-serif;
color: #ffffff;
}
.bar{
height: 115px;
width: 100%;
background-color: #15151d;
}
.DJ-text{
font-weight: 700;
position:relative;left:50px;
position:relative;top:80px;
text-transform: uppercase;
}
.Chat-text{
position:relative;left:900px;
}
.DJ-underline{
width: 900px;
height: 1px;
position:relative;top:20px;
background-color: #3f3f45;
}
.Chat-underline{
width: 400px;
position:relative;left:-140px;
float:right;
height: 1px;
position:relative;top:20px;
background-color: #3f3f45;
}
/*.youtube-video{
position: relative; left: 50px;
position: relative; top: 130px;
}
.chat {
max-width: 400px;
background-color: #0f0f17;
position:relative;left:1093px;
position:relative;top:150px;
}*/
.chat-messages,
.chat-textarea,
.chat-name {
border: 1px solid #1a1a23;
background-color: #1a1a23;
}
.userName{
font-weight: 700;
color: #079ce0;
}
.chat-messages {
width:100%;
height:400px;
overflow-y:scroll;
padding:10px;
}
.chat-message {
margin-bottom:10px;
}
.info-rect{
height: 40px;
width: 180px;
padding:10px;
max-width: 100%;
margin:0;
border:0;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
text-transform: uppercase;
}
.chat-name{
height: 40px;
max-width: 100%;
width: 180px;
padding:10px;
border:0;
margin:0;
font-weight: 700;
text-transform: uppercase;
float:left;
text-align: center;
}
.chat textarea {
width:100%;
padding:10px;
margin:0;
border-top:0;
max-width:100%;
border-top: 1px solid #0f0f17;
border-bottom: 1px solid #1a1a23;
border-right: 1px solid #1a1a23;
border-left: 1px solid #1a1a23;
background-color: #1a1a23;
}
.chat-status {
color: #bbb;
background-color: #0f0f17;
}
.info-rect,
.chat textarea,
.chat-name {
max-width: 100%;
}
使用@ georges_user2251342提供的上述代码，这就是页面的样子：
以下是参考PSD：http://imgur.com/4XU62C9
4 个答案:
答案 0 :(得分：2)
他们说的是真的！如果我理解正确的话，通过居中，你的意思是并排放置两件东西，彼此相邻，可以这么说。
在您的情况下，“youtube-video”元素和“chat”元素需要与百分比并排放置，是的。但是，我会使用66％，33％的百分比而不是80％的20％。因为你的“聊天”元素看起来不太好，只有20％。看起来很嘎嘎。
看看这些：
（66％-33％）http://lespointscom.com/a/misc/demo/2016_06_18/main_4.html
（80％-20％）http://lespointscom.com/a/misc/demo/2016_06_18/main_5.html
再次使用新HTML：
<!DOCTYPE html>
<html>
<head>
<title>Chat</title>
<link rel="stylesheet" href="main6.css">
</head>
<body>
<div class="header-bar">
<div class="bar"></div>
<div class="dropshadow"></div>
</div>
<div class="container">
<div class="youtube-video">
<div class="DJ-text">Affinity FM DJ Room</div>
<div class="DJ-underline"></div>
<iframe class="iframe" src="https://www.youtube.com/embed/2GvIq2SpVFM" frameborder="0" allowfullscreen></iframe>
</div>
<div class="chat">
<div class="Chat-text">Chat</div>
<div class="Chat-underline"></div>
<input type="text" class="chat-name" placeholder="Chat">
<div class="info-rect">Info</div>
<div class="chat-messages"></div>
<textarea placeholder="Join the conversation..."></textarea>
<div class="chat-status">Status: <span>Idle</span></div>
</div>
</div>
<script src="http://127.0.0.1:8080/socket.io/socket.io.js"></script>
<script>
(function() {
var getNode = function(s) {
return document.querySelector(s);
},
// Get required nodes
status = getNode('.chat-status span'),
messages = getNode('.chat-messages'),
textarea = getNode('.chat textarea'),
chatName = getNode('.chat-name'),
statusDefault = status.textContent,
setStatus = function(s){
status.textContent = s;
if(s !== statusDefault){
var delay = setTimeout(function(){
setStatus(statusDefault);
clearInterval(delay);
}, 3000);
}
};
//try connection
try{
var socket = io.connect('http://127.0.0.1:8080');
} catch(e){
//Set status to warn user
}
if(socket !== undefined){
//Listen for output
socket.on('output', function(data){
if(data.length){
//Loop through results
for(var x = 0; x < data.length; x = x + 1){
var message = document.createElement('div');
message.setAttribute('class', 'chat-message');
message.textContent = ': ' + data[x].message;
var name=document.createElement('span');
name.setAttribute('class', 'userName');
name.textContent = data[x].name;
message.insertBefore(name, message.firstChild);
//Append
messages.appendChild(message);
messages.insertBefore(message, messages.firstChild);
}
}
});
//Listen for a status
socket.on('status', function(data){
setStatus((typeof data === 'object') ? data.message : data);
if(data.clear === true){
textarea.value = '';
}
});
//Listen for keydown
textarea.addEventListener('keydown', function(event){
var self = this,
name = chatName.value;
if(event.which === 13 && event.shiftKey === false){
socket.emit('input', {
name: name,
message: self.value
});
}
});
}
})();
</script>
</body>
</html>
再次使用新的CSS：
.youtube-video{
float: left;
width:66%;
}
.chat {
float: left;
width:33%;
}
.iframe {
width:98%;
min-height:500px;
}
.container {
width:98%;
}
body {
background-color: #0f0f17;
margin: 0px;
width: 100%;
}
body,
textarea,
input {
font: 13px "Raleway", sans-serif;
color: #ffffff;
}
.bar{
height: 115px;
width: 100%;
background-color: #15151d;
}
.DJ-text{
font-weight: 700;
/*position:relative;
left:50px;
top:80px;*/
text-transform: uppercase;
}
.Chat-text{
font-weight: 700;
/*position:relative;left:900px;*/
text-transform: uppercase;
}
.DJ-underline{
width: 98%;
height: 1px;
position:relative;top:20px;
background-color: #3f3f45;
margin: 0px 0px 50px;
}
.Chat-underline{
width: 100%;
position:relative;
/*left:-140px;*/
float:right;
height: 1px;
position:relative;top:20px;
background-color: #3f3f45;
margin: 0px 0px 50px;
}
.chat-messages,
.chat-textarea,
.chat-name {
border: 1px solid #1a1a23;
background-color: #1a1a23;
}
.userName{
font-weight: 700;
color: #079ce0;
}
.chat-messages {
width:95%;
height:400px;
overflow-y:scroll;
padding:10px;
}
.chat-message {
margin-bottom:10px;
}
.info-rect{
height: 40px;
width: 180px;
padding:10px;
max-width: 100%;
margin:0;
border:0;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
text-transform: uppercase;
}
.chat-name{
height: 40px;
max-width: 100%;
width: 180px;
padding:10px;
border:0;
margin:0;
font-weight: 700;
text-transform: uppercase;
float:left;
text-align: center;
}
.chat textarea {
width:95%;
padding:10px;
margin:0;
border-top:0;
max-width:100%;
border-top: 1px solid #0f0f17;
border-bottom: 1px solid #1a1a23;
border-right: 1px solid #1a1a23;
border-left: 1px solid #1a1a23;
background-color: #1a1a23;
}
.chat-status {
color: #bbb;
background-color: #0f0f17;
}
.info-rect,
.chat textarea,
.chat-name {
max-width: 100%;
}
@media only screen and (max-width: 772px) and (min-width: 0px)
{
.youtube-video{
width:100%;
}
.chat{
width:100%;
}
}
@media only screen and (max-width: 1254px) and (min-width: 0px)
{
.info-rect{
width:30%;
}
}
@media only screen and (max-width: 1054px) and (min-width: 0px)
{
.info-rect{
width:10%;
}
}
答案 1 :(得分：1)
您可以使用position属性将聊天框置于右侧。
-
为
添加此cssyoutube-videowidth:80%; height:100%; position:absolute; left:0; top:0; -
为
添加此csschatwidth:20%; height:100%; position:absolute; right:0; top:0;
因此，通过这样做，您可以将聊天框设置为正确。
以下是Plnkr
希望它适合你：）
答案 2 :(得分：0)
只需将float: left;添加到两个div：
<!DOCTYPE html>
<html>
<head>
<title>Chat</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="header-bar">
<div class="bar"></div>
<div class="dropshadow"></div>
</div>
<div class="DJ-text">Affinity FM DJ Room
<span class="Chat-text">Chat</span>
<div class="DJ-underline"></div>
<div class="Chat-underline"></div></div>
<div class="youtube-video" style="float: left;">
<iframe width="900px" height="500px" src="https://www.youtube.com/embed/2GvIq2SpVFM" frameborder="0" allowfullscreen></iframe>
</div>
<div class="chat" style="float: left; padding: 0px 0px 0px 12px;">
<input type="text" class="chat-name" placeholder="Chat">
<div class="info-rect">Info</div>
<div class="chat-messages"></div>
<textarea placeholder="Join the conversation..."></textarea>
<div class="chat-status">Status: <span>Idle</span></div>
</div>
<script src="http://127.0.0.1:8080/socket.io/socket.io.js"></script>
<script>
(function() {
var getNode = function(s) {
return document.querySelector(s);
},
// Get required nodes
status = getNode('.chat-status span'),
messages = getNode('.chat-messages'),
textarea = getNode('.chat textarea'),
chatName = getNode('.chat-name'),
statusDefault = status.textContent,
setStatus = function(s){
status.textContent = s;
if(s !== statusDefault){
var delay = setTimeout(function(){
setStatus(statusDefault);
clearInterval(delay);
}, 3000);
}
};
//try connection
try{
var socket = io.connect('http://127.0.0.1:8080');
} catch(e){
//Set status to warn user
}
if(socket !== undefined){
//Listen for output
socket.on('output', function(data){
if(data.length){
//Loop through results
for(var x = 0; x < data.length; x = x + 1){
var message = document.createElement('div');
message.setAttribute('class', 'chat-message');
message.textContent = ': ' + data[x].message;
var name=document.createElement('span');
name.setAttribute('class', 'userName');
name.textContent = data[x].name;
message.insertBefore(name, message.firstChild);
//Append
messages.appendChild(message);
messages.insertBefore(message, messages.firstChild);
}
}
});
//Listen for a status
socket.on('status', function(data){
setStatus((typeof data === 'object') ? data.message : data);
if(data.clear === true){
textarea.value = '';
}
});
//Listen for keydown
textarea.addEventListener('keydown', function(event){
var self = this,
name = chatName.value;
if(event.which === 13 && event.shiftKey === false){
socket.emit('input', {
name: name,
message: self.value
});
}
});
}
})();
</script>
</body>
</html>
为了更好看，添加padding: 0px 0px 0px 12px;或类似的小填充以分隔两个div。
答案 3 :(得分：0)
-
为
添加此cssyoutube-video宽度：80％; 浮动：左
-
为
添加此csschat宽度：20％; 浮动：左
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？