考虑这个HTML：在响应/百分比布局中隐藏子元素？

<body> 
    <div id="parent"> 
    <div id="child"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus sapien congue, fringilla justo quis, aliquam tellus. Maecenas semper consectetur metus eget varius. Curabitur imperdiet sagittis leo, a mollis dui lobortis in. In ac facilisis tortor. Nam vitae pellentesque lorem, non commodo lacus. 
    <div> 
    </div> 
</body>

这里的目的是尝试，并有家长div隐藏子div与overflow:hidden。但预期的用途是动画/更改父母的宽度，以“揭示”孩子的内容。要清楚，我不需要为此目的的动画/更改代码。我只需要简单的HTML/CSS的一个坚实的基础，从而将有可能在运行时动画/改变，同时保留这些原始的规则：

母公司必须是屏幕的百分比宽度（以动画的意图其宽度以展现/隐藏其孩子）。
孩子也必须是屏幕的百分比宽度。
孩子不得根据其父母包装其内容。
父母应该只显示尽可能多的孩子，因为它可以给它的宽度。
没有绝对宽度像素。
没有CSS3。
没有JavaScript。

例：

这里是我想要达到一个例子：

aims

在这个例子中，只有孩子的父母div节div应该是可见的。但孩子的内容不应该包装，父母和孩子都应该是屏幕的百分比宽度。

我已经试过：

到目前为止，我已经尝试使用这个CSS：

html, body{ 

    height:100%; 

} 

#parent{ 

    position:relative; 

    width:15%; 
    height:100%; 

    overflow:hidden; 

} 

#child{ 

    position:absolute; 

    width:200%; 

}

上面的CSS问题是，孩子div是不断根据其母公司div调整其width，因此通过增加其父母的百分比宽度来“揭示”子女div几乎是不可能的，直到孩子c意图已经完全“解开”了自己。

你可能会问：

使孩子宽度保持在屏幕上保持一致，为什么不从父删除position:relative？

因为为了隐藏绝对定位的子元素，父级需要将其位置设置为relative。

为什么不让子元素static或relative？

因为那么孩子的内容根据其父项包装，因此无法'隐藏'任何东西。

为什么孩子在200％？

因此它可以具有30％的相对宽度（屏幕）。因为父母是15％，所以孩子需要是其父母百分比宽度的两倍，以便获得30％的屏幕填充。

我们可以使用像素的绝对宽度吗？

号

我们可以使用CSS3？

号

我们可以使用JavaScript？

不，如果我们可以使用JavaScript，我不会问这个问题，我会在酒吧里。 :-)

来源

2013-09-22 shennan

我知道它不是你的答案，因为你不能使用CSS3或JS，，但对于其他谁想知道这个职位，可以，访问[这里]（http://stackoverflow.com/questions/18936352 /隐藏子元素与百分比宽度）的答案。 – avrahamcool

你当前的代码有什么问题？ [It works]（http://jsfiddle.net/itay1989/cxUnK/1/） – Itay

@Itay您是否尝试过将父宽度设置为“显示”孩子内容？ – shennan

试图找到一个解决办法，我来到这个posibility：

.parent { 
    position: relative; 
    height: 90%; 
    width: 100%; 
    left: -70%; 
    border-right: 1px solid red; 
    overflow: hidden; 
} 

.parent2 { 
    position: absolute; 
    width: 100%; 
    height: 99%; 
    left: 70%; 
    border: 1px solid red; 
    overflow: hidden; 
} 

.parent, .parent2 { 
    -webkit-transition: all 2s; 
} 

.child { 
    position: absolute; 
    width: 50%; 
    height: 80%; 
    border: 2px solid green; 
    background: url("http://placekitten.com/200/300"); 
    background-size: cover; 
} 

.parent:hover { 
    left: -40%; 
} 

.parent:hover .parent2 { 
    left: 40%; 
}

您实现

<div class="parent"> 
<div class="parent2"> 
<div class="child"> 
</div> 
</div> 
</div>

那么这个CSS：

您将需要一个额外的包装一种“滑动窗口”技术。父母并不真正成长，2位父母改变立场以允许或多或少地看到孩子。

fiddle

的过渡悬停已经实施。此外，你摆脱了孩子宽度的人造微积分。

来源

2013-10-18 21:21:28 vals

需求的时间已经过去了，但这是解决具体需求问题的巧妙方法。干得好时间，我相信这将在未来的项目中有用。 – shennan

在响应/百分比布局中隐藏子元素？

回答

fiddle

相关问题