我想在视频中心没有固定宽度的div,所以如果窗口调整大小,div会随之缩小但仍然在中心.我使用左边的当前设置接近正确：50％,半负边距.问题显然是在负边际固定时向左移动.有任何想法吗？谢谢！

我的HTML：

<div id = 'top-container'>
   <video id='top-vid' autoplay loop width=100% height='auto'>
       <source src='DS_Intro.mov' type='video/mp4'>
       <source src='test.webm' type='video/webm'>
   </video>

   <div id = 'top-content'>
       <div id = 'top-text'>
           <div id = 'top-img'>
               <img src='ds_white.png' width = "100%" height = 'auto'>
           </div>
           <h1 id = 'top-slogan'>a boutique video production studio</h1>
       </div>
   </div>
</div>

我的CSS：

#top-container{
    width:100%;
    height:100%;
}

#top-content{
    max-width:1200px;
    margin-right:auto;
    margin-left:auto;
}

#top-img{
    width:100%;
    padding-bottom: 10%;
}

#top-slogan{
    text-align:center;
    padding-bottom:10%;
    font-weight: 100;
    color:#5DBCD2;

}

#top-text {
    top: 50%;
    left: 50%;
    margin-left: -360px;
    position:absolute;
    width:50%;

}

这是FIDDLE

这可以通过使用transform：translate(-50％,– 50％);
通过使用它,内部元素可以是动态的(不需要负边距),请参见此示例

http://jsfiddle.net/Mfsfm/2/

我最近被分配了复制我们以前的Web开发者制作的JS弹出窗口的工作.我有一个非常相似但有一件事我不能得到,关闭按钮(X)漂浮在弹出的右上角的弹出窗口(而不是坐在弹出窗口的右上角).我已经尝试了在Stack和Stack中发现的CSS和其他属性中的position：值,但是没有一个似乎没有办法.

CSS：

#popup {
    position:absolute;
    display:hidden;
    top:50%;
    left:50%;
    width:400px;
    height:586px;
    margin-top:-263px;
    margin-left:-200px;
    background-color:#fff;
    z-index:2;
    padding:5px;
}
#overlay-back {
    position : fixed;
    top : 0;
    left : 0;
    width : 100%;
    height : 100%;
    background : #000;
    opacity : 0.7;
    filter : alpha(opacity=60);
    z-index : 1;
    display: none;
}
.close-image {
    display: block;
    float:right;
    cursor: pointer;
    z-index:3
}

HTML：

<div id="overlay-back"></div>
<div id="popup">
    <imgsrc="images/closebtn.png" /><span><img src="images/load_sign.png" width="400" height="566" /></span>
</div>

只需添加位置,右侧和顶部到您的类.close-image

.close-image {
    cursor: pointer;
    display: block;
    float: right;  
    z-index: 3;
    position: absolute; /*newly added*/
    right: 5px; /*newly added*/
    top: 5px;/*newly added*/
}

我想在父div中的某个位置将4个div放在彼此旁边.
所以div结构就是这个(我称之为maindiv最顶层的div)：

<div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>

现在我想在maindiv的左边设置文本“1”的div

现在我想在maindiv的左侧以50像素设置文本’2’的div

现在我想在maindiv的左侧以150像素设置文本“3”的div

现在我想在maindiv的左侧以200像素设置文本’4’的div

我认为:-)我已经尝试过所有可能的css结构,但遗憾的是它没有用.

有人有想法吗？

给位置：相对于主div

位置：绝对给孩子们并用左手定位他们：xyz;顶部：xyz.

如何编写css以实现以下效果？

我当前的设置是外部div位置：相对,内部div位置：绝对.没工作.

请指教.非常感谢你.

------------
    |//////////|
    |//////////|  <= hidden
--------------------
|   |          |   |
|   | inner div|   |
|   |          |   |
|   ------------   |
|                  |
|                  |
|                  |
|                  |
--------------------

你的代码几乎就在那里.您需要做的是设置要隐藏的父级的overflow属性.默认情况下,您的浏览器会将其设置为可见,这样就可以显示突出显示元素两侧的任何内容,如您所见.

这里有一些显示溢出的代码：隐藏在工作中. View it on JSFiddle.

HTML

​<div id="parent">
  <div>
  </div>
</div>​​​​

CSS

​​#parent {
  width: 100px;
  height: 100px;
  position: relative;
  top: 50px;
  left: 50px;
  background: #eee;
  overflow-y: hidden;
}
#parent > div {
  position: absolute;
  width: 50px;
  height: 50px;
  top: -25px;
  left: 25px;
  background: #555;
}

值得注意的是,在这个例子中,我只是隐藏了垂直方向的溢出.您既可以设置它,也可以只是水平设置或垂直设置.这是非常整洁的东西.

有兴趣了解更多关于溢出的信息？我的男人Chris Coyier有an excellent article about it.你应该在某个时候给它一个通读.

这一定是一个经常回答的问题,但是我的google-foo让我失望了.
看一下漂亮的图表：

+------------+ +--+
|    nav     | |  |
+------------+ |s |
+--+ +--+ +--+ |i |
|:)| |:)| |:)| |d |
+--+ +--+ +--+ |e |
               |  |
+--+ +--+ +--+ |  |
|:)| |:)| |:)| |  |
+--+ +--+ +--+ +--+ 

+--+ +--+ +--+ +--+
|:)| |:)| |:)| |:)|
+--+ +--+ +--+ +--+

它代表一个容器,其中有一个导航div,一个侧边栏div和许多包含图像和文本的小div.

我想要实现的是,无论侧边栏的高度如何,图像div都将出现在一个很好的行中,在给定的行中有尽可能多的列.他们将很好地包裹在侧边栏下.

我已经尝试了一百万种不同的方式,但是图像div要么从侧边栏的底部开始,要么第二行将有3个div,然后是第四个,由侧边栏向下推.

+------------+ +--+
|    nav     | |  |
+------------+ |s |
+--+ +--+ +--+ |i |
|:)| |:)| |:)| |d |
+--+ +--+ +--+ |e |
               |  |
+--+ +--+ +--+ |  |
|:)| |:)| |:)| +--+
+--+ +--+ +--+ +--+
               |:(|
               +--+
+--+ +--+ +--+ +--+
|:(| |:(| |:(| |:(|
+--+ +--+ +--+ +--+

我错过了一些明显的东西吗这是否可能,如果是这样,怎么样？

这个怎么样？

http://jsfiddle.net/antiflu/kwvcZ/

它背后的想法是你想浮动侧边栏(将它放在流量之外).导航栏和虚拟项应该是流中的块元素(在流之后,但之前有换行符),图像应该是流中的内联元素(填充页面的其余部分,如文本).

源代码HTML：

<imgsrc="http://dummyimage.com/123x340">
<imgsrc="http://dummyimage.com/340x123">
<div>Dummy</div>
<imgsrc="http://dummyimage.com/100x100">
<imgsrc="http://dummyimage.com/100x100">
(etc...)

源代码CSS：

img.nav {float: left;}
img.sidebar {float:right;}
div.break {clear: left;}
img.i1 {display:inline; padding: 5px;}

PS.我用img标签做了,但你也可以使用DIV.

更新：为了使图像元素本身成为可以使用布局等的块,您可以使用display：inline-block而不是内联i1类型元素：

http://www.jsfiddle.net/antiflu/nqNeZ/

这在我的Chrome上运行得很好,但是对于IE和Firefox 2,你会遇到几个cross-browser issues.但是这些问题可以通过遵循these或these指南来解决.