1
2つのdivを並べて並べるのがよくある質問ですが、私はYouTubeのビデオとチャットボックスを隣り合わせに並べることに少し問題があります。私はスパンを使っているはずです。これは、YouTubeビデオと同じスペースにあるチャットボックスを正しく表示できるからです。私はまだHTMLでロープを学んでいます。こちらのページは現在、次のようになります。DivとYouTubeビデオのサイドアライメント
ここに私の現在のHTMLコードがあり、扱うdiv要素は、ユーチューブのビデオは、「ユーチューブ・ビデオ」クラス名で、チャットボックスを扱うの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>
：
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
ビデオを左に、チャットボックスを右にしたいですか？ – Thinker
@Thinkerはい正しい、申し訳ありませんが指定する必要があります –