样式 css 宽度：继承？

Question

我有一些元素从我的父母div 中传出。为什么？

这就是我所拥有的

CSS：

.lightbox img {
    margin-top: 2%;
}

.viewer-v3.lightbox {
    overflow: auto;
    display: block;
    position: fixed;
    z-index: 9999;
    width: 100%;
    height: 100%;
    text-align: center;
    top: 0;
    left: 0;
    background: black;
    background: rgba(0,0,0,0.8);
}

.viewer img {
    margin-top: 2%;
    max-width: 100%;
    margin-bottom: 2%;
}


.borderLightbox
{
    border:#cccccc;
    border-width:1%;
    border-top-style:none;
    border-right-style:solid; 
    border-bottom-style :solid;
    border-left-style:solid;
    position:relative;

    width: 80%;
    background-color:#e5e5e5;
    margin-left:auto;
    margin-right:auto;
}




.headerLightbox
{
    position:fixed;
    background-color:#e5e5e5;
    border:#cccccc;
    border-width:1%;
    width: inherit;
    float:left;
    border-top-style:solid;

    border-right-style:none; 
    border-bottom-style :none;

    border-left-style:none;
}

.actionsLightbox
{
    background-color:#ffffff;
}

还有 HTML：

<div class="viewer-v3 lightbox">
    <div class="borderLightbox">

        <div class="headerLightbox">
            HEADER

            <div class="actionsLightbox">
               ACTIONS
            </div>

        </div>

        <img class="image" src="http://www.goldbergjones-or.com/blog/wp-content/uploads/2013/05/how-to-get-divorced.jpg">
    </div>
</div>

问题在于标题和操作总是脱离父 div。我不知道为什么，因为所有的 widhts 都是从父 div 继承的，而我的标题和动作 div 总是从父级中获取出来？

Answer 1

更新 3

解决办法是在内容周围加一个内容框，让他有滚动条。

看到这个example。

HTML

<div class="viewer-v3 lightbox">
   <div class="borderLightbox">
       <div class="headerLightbox">
           HEADER
           <div class="actionsLightbox">
               ACTIONS
           </div>
       </div>
       <div class="contentbox">
           <img class="image" src="http://www.goldbergjones-or.com/blog/wp-content/uploads/2013/05/how-to-get-divorced.jpg">
       </div>
   </div>
</div>

CSS

.lightbox img {
  margin-top: 2%;
}

.viewer-v3.lightbox {
    overflow: auto;
    display: block;
    position: fixed;
    z-index: 9999;
    width: 100%;
    height: 100%;
    overflow: hidden;
    text-align: center;
    top: 0;
    left: 0;
    background: black;
    background: rgba(0,0,0,0.8);
}

.viewer img {
    margin-top: 2%;
    max-width: 100%;
    margin-bottom: 2%;
}
.contentbox {
    height: 100%;
    overflow: auto;
}


.borderLightbox
{
    border:#cccccc;

    border-width:1%;
    border-top-style:none;

    border-right-style:solid; 
    border-bottom-style :solid;

    border-left-style:solid;
    position:relative;
    width: 80%;
    height: 100%;
    background-color:#e5e5e5;
    margin-left:auto;
    margin-right:auto;
    overflow: visible;
}

.headerLightbox
{
    position:fixed;
    background-color:#e5e5e5;
    border:#cccccc;
    border-width:1%;
    width: inherit;
    float:left;
    border-top-style:solid;

    border-right-style:none; 
    border-bottom-style :none;

    border-left-style:none;
}

.actionsLightbox
{
    background-color:#ffffff;
}

更新 2

了解您的要求，恐怕是不可能的。

这种行为的原因是.viewer 获得了一个滚动条，因此它的内容宽度不会等于正文的宽度。

因此：80% 的观众！= 80% 的身体（这就是 position: fixed .header 所拥有的）

要明白我的意思，只需从.viewer 中删除height: 100%，一切都会弹出（只有.viewer 不能滚动，这是不行的）

更新 1

如果您需要修复它：像素大小有帮助吗？

.borderLightbox {
   width: 500px;
}

http://jsbin.com/AkAhawa/5

原创

这是因为您拥有position: fixed; 属性。

考虑一下，这会将它从其父级的上下文中取出，并将主体作为其父级，因此从那时起，.headerLightbox 的定位和大小将相对于视口。

如果您希望简单地显示带有width: 100% 的标题（关于其父级），请使用

.headerLightbox
{
    width: 100%;
}