带图像的自动保证金容器：之前和之后：作为容器左/右边界？ [英] Auto-margin container with image :before and :after as container left/right border?

问题描述

您好我正尝试将Youtube视频封装到具有自动边距的容器中，然后将以下两个图像作为边界直接应用于左侧和右侧：before和after之后。结果应该是浏览器窗口集中在视频上，但是当浏览器窗口展开时，图像会显示在左侧和右侧。

很确定，在定位上发生错误。我甚至不确定是否：之前和之后是实现此目标的最佳方式。所有的建议，以获得理想的结果是值得欢迎的。

编辑：左图像的右边缘应始终与视频的左边缘对齐，对于右侧图像（左边缘与视频的右边缘对齐），因此它们的行为类似于内嵌块元素。这可以通过整个视频背景图像来实现吗？

这是我的html：

 < div class =container> 
< iframe id =ytplayertype =text / htmlwidth =960height =540
 src =http://www.youtube.com/embed/orosuMZsn7I？ autoplay = 0& origin = http：//example.com
 frameborder =0/> 
< / iframe> 
< / div> 
  

和我的css：

 <风格> 
 .container {
 width：960px; 
 height：540px; 
 margin-left：auto; 
 margin-right：auto; 
} 
 .container：之前{
 content：url（img / surround_02.jpg）; 
 height：540px; 
 width：211px; 
位置：绝对; 
} 
 .container：after {
 content：url（img / surround_03.jpg）; 
 height：540px; 
 width：218px; 
位置：绝对; 
} 
 .container iframe {
 position：absolute; 
} 
< / style> 
  

解决方案

好的，答案不适合了，我想出了一个新的解决方案：
http://jsfiddle.net / fusuhga6 / 3 /

再次，非常简单：

一切都在DIV中，包含Youtube视频，

 `position：relative` 
`margin：0 auto` 
  
 
 
 
以水平居中。
 
 
 
这两张图片是两张绝对背景图片位于#youtube DIV中的定位DIV，但定位如下： 
 
 
  #leftPic， #rightPic {
 position：absolute; 
 width：90px; 
 height：200px; 
} 
 #leftPic {
 left：-90px; 
背景：url（http://placehold.it/90x200）不重复右上; 
} 
 #rightPic {
 right：-90px; 
背景：url（http://placehold.it/90x200）不重复左上角; 
 
 $ / code> 
所以它们的左/右偏移对应于它们的（固定）宽度。由于它们被附加到#youtube DIV，所以整个组将被居中。
 
 
 
现在，当窗口变得比这三个块更窄时，#youtube DIV将保留其他两个与之前保持一致，他们的_outer_parts被切断。
 
 
 
这应该符合您的标准... 
 
Hi I'm trying to wrap a Youtube video in a container with auto margins, then apply 2 images as a kinda border to the immediate left and right with :before and :after. The result should be that the browser windows centres on the video, but when the browser window is expanded then the images to the left and right are revealed.

Pretty sure I'm going wrong on the positioning. I'm not even sure if :before and :after is the best way to achieve this. All suggestions to get the desired outcome are welcome.

EDIT: The left image's right edge should always line up with the left edge of the video, and vica versa for the right side image (left edge lines up with right edge of video), so they sort of act like inline-block elements. Could this be achieved with a background image behind the entire video maybe?

Here's my html:
<div class="container">
   <iframe id="ytplayer" type="text/html" width="960" height="540"
    src="http://www.youtube.com/embed/orosuMZsn7I?autoplay=0&origin=http://example.com"
    frameborder="0"/>
   </iframe>
</div>
and my css:
<style>
.container {
    width: 960px;
    height: 540px;
    margin-left: auto;
    margin-right: auto;
}
.container:before {
    content: url(img/surround_02.jpg);
    height: 540px;
    width:211px;
    position:absolute;
}
.container:after {
    content: url(img/surround_03.jpg);
    height: 540px;
    width:218px;
    position:absolute;
}
.container iframe {
    position:absolute;
}
</style>

解决方案
Okay, since the question was edited so that my previous answer didn't fit anymore, I came up with a new solution:
http://jsfiddle.net/fusuhga6/3/

Again, pretty straightforward:

Everything is in the DIV that holds the Youtube-video, which has 
`position:relative` 
`margin: 0 auto`
in order to center it horizontally.

The two images are background-images in two absolute-positioned DIVs that are in the #youtube DIV, but positioned like this:
#leftPic, #rightPic {  
  position: absolute;
  width: 90px;
  height: 200px;
  }
 #leftPic {
   left: -90px;
  background: url(http://placehold.it/90x200) no-repeat top right;
 }
  #rightPic {
    right: -90px;
  background: url(http://placehold.it/90x200) no-repeat top left;
 }
So their left/right offsets correspond to their (fixed) width. Since they are attached to the #youtube DIV, that whole group will be centered.

Now, when the window becomes narrower than those three blocks together, the #youtube DIV remains centered, and the other two remain aligned to it as before, with their _outer_parts being cut off.

That should fulfill your criteria...

                        
这篇关于带图像的自动保证金容器：之前和之后：作为容器左/右边界？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！