html – 隐藏第二个div溢出时另一个div的div的一部分

概述我有一个div,我想把它的一部分放在另一个div上.它应该如下所示： 图片1 我已经设法提出下面的代码,如果我删除overflow：hidden;来自div imageSlider,但如果我没有,那么它给我以下结果： 图2 你可以在这里查看代码：http://jsfiddle.net/Y52fu/ 但我必须使用overflow：hidden;作为div imageSlider的CSS规则,因为它实 我有一个div,我想把它的一部分放在另一个div上.它应该如下所示：

图片1

我已经设法提出下面的代码,如果我删除overflow：hIDden;来自div imageSlIDer,但如果我没有,那么它给我以下结果：

图2

你可以在这里查看代码：http://jsfiddle.net/Y52fu/

但我必须使用overflow：hIDden;作为div imageSlIDer的CSS规则,因为它实际上是图像滑块的div.如果不使用它,则图像滑块会失去它的功能.

你能告诉我如何实现如图1所示的结果,保持溢出：隐藏;对于div imageSlIDer？

HTML

<div >    <div >        <div >            <div ><span>PARIS</span></div>                </div>    </div>  </div>

CSS

.imageSlIDer{        wIDth:400px;    overflow:hidden;    }.Box{    wIDth:400px;    height:300px;    background-color:green;    position:relative}.slIDeCaption1 {        top: 20px;    right:-12px;    position: absolute;     background: rgb(000,000,000);     background: rgba(000,0.75);}.slIDeText1{    color: white;       Font-size:22px;    line-height:35px;    padding-left: 9px;    padding-right: 9px;    padding-top: 5px;    padding-bottom: 5px;        Font-weight:bold;    margin-right:15%;    margin-left:9%;    text-transform:uppercase;    }

更新

请检查此链接以查看我的项目中的实际代码：http://jsfiddle.net/P7mdV/1/

解决方法 您可以使用clearfix来保留布局.从主div中删除’overflow：hIDden’并添加clearfix类.然后添加到您的CSS：

.clearfix:before,.clearfix:after {  content: ".";      display: block;      height: 0;      overflow: hIDden; }.clearfix:after {clear: both;}.clearfix {zoom: 1;} /* IE < 8 */

看到我的小提琴：
http://jsfiddle.net/Y52fu/1/

编辑：使用您的新示例,它使用更复杂的布局和引导样式,因此相同的修复将不适用.由于旋转木马内部需要将内容隐藏在宽度集之外,所以我必须稍微玩一下,看起来像添加填充效果,如果它设置为与右偏移相同.唯一的问题是文本在滑入到位后会跳跃一点.

.carousel {    wIDth: 400px;} .carousel-inner {    padding-right: 12px;}

我在图像上设置了一个明确的宽度,因为如果不这样做,它们会跳跃一下(因为当它们滑入视图并且填充就位时,宽度的100％会发生变化).你可以在这里看到它：
http://jsfiddle.net/P7mdV/3/

总结

以上是内存溢出为你收集整理的html – 隐藏第二个div溢出时另一个div的div的一部分全部内容，希望文章能够帮你解决html – 隐藏第二个div溢出时另一个div的div的一部分所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。