Question

我有3个div

1 - 包装

2 - 视频（我希望它始终位于包装器的中心）

3 - 视频建议（即使您调整视频或窗口大小，我希望它就在视频旁边）

<div id="videoWrapper">
    <div id="videoBlock">            
        <iframe stuff></iframe>
    </div>
    <div id="videoSuggestions"></div>
</div>

我知道我必须以某种方式找到第二个div的偏移，但是我的小人脑无法处理这个问题。的 Fiddle demo

Answer 1

使用CSS仅执行此操作。

将此CSS应用于主要div，它将完成所有工作。试一试。

#videoWrapper{
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */  
}

Answer 2

轻松使用几个CSS属性:(在下面运行）

＆＃13;

#videoWrapper {
  height: 400px;
  width: 70%;
  margin: 0 auto;
}
#videoWrapper *{
    display : inline-block;
    vertical-align : top;
    height: 100%;
  
    
}
#videoWrapper iframe{
    border: green solid 1px;
    width : 69%;
}

#videoSuggestions {
  background-color: green;
    width: 30%;
}

＆＃13;

<div id="videoWrapper">           
        <iframe width="100%" height="100%" src="//www.youtube.com/embed/<?= $videoId[1] ?>?vq=hd720&showinfo=0&rel=0&iv_load_policy=3" frameborder="0" allowfullscreen></iframe><div id="videoSuggestions"></div>
</div>

＆＃13;

Answer 3

我会从 Twitter Bootstrap 中获取一个页面并使用一些相当基本的CSS：

#videoBlock {
    width: 67%;
    float: left;
}
#videoSuggestions {
    float: right;
    width: 33%;
}
.video-embed {
    padding: 0;
    padding-bottom: 56.25%;
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    height: 0;
    overflow: hidden;
}
.video-embed iframe {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

<强> Demo

Answer 4

You dont't need to change your css.    
The errors are in jquery.
Three reasons of not working.

1st>You forgot to give '#' in $('videoblack').  
2nd>Multiple event will appear in 'bind' function(not 'on') .   
3rd>Event will on 'window' not 'document'. 

So the JQuery code will be like this

$(window).bind('load scroll resize', function () {    
    var pos = $('#videoBlock').position();    
    var width = $('#videoBlock').outerWidth();    
    $("#videoSuggestions").css({    
        position: "absolute",    
        top: (pos.top + 10) + "px",    
        left: (pos.left + width + 10) + "px"    
    }).show();   
});

一个div紧挨着另一个

4 个答案: