我有一些元素是从我的父 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>

问题在于 header 和操作总是从父级 div 中获取。我不知道为什么，因为所有的宽度都是从父级 div 继承的，而我的标题和操作 div 总是从父级中获取？

最佳答案

更新 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 有一个滚动条，因此它的内容宽度不等于 body 的宽度。

因此:80% 的观众!= 80% 的正文(这就是您在 position: fixed .header 中所拥有的)

为了明白我的意思，只需从 .viewer 中删除 height: 100%，一切都会弹出到位(只有那个 .viewer 将不可滚动，这是不行的)

更新 1

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

.borderLightbox {
   width: 500px;
}

http://jsbin.com/AkAhawa/5

原创

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

将其视为将其从其父级上下文中取出并使主体成为其父级，因此从那时起，.headerLightbox 的定位和大小将相对于视口(viewport)。

如果您只想显示带有 width: 100% 的 header (关于其父级)，则使用

.headerLightbox
{
    width: 100%;
}

关于html - 样式 css 宽度 :inherit?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21277817/