4

我有一个 div，我想把它的一部分放在另一个 div 上。它应该如下所示：

图 1

我设法想出了下面的代码，如果我overflow:hidden;从 div中删除它可以正常工作，imageSlider但如果我不这样做，它会给我以下结果：

图 2

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

但我必须将其overflow:hidden;用作 div 的 CSS 规则，imageSlider因为它实际上是图像滑块的 div。如果不使用它，则图像滑块将失去其功能。

您能否告诉我如何实现如图 1 所示的结果，保留overflow:hidden;div imageSlider？

HTML

<div class="imageSlider">
    <div class="box">
        <div class="slideCaption1">
            <div class="slideText1"><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, 000, 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/

4

3 回答 3

1

您可以简单地将 .box 位置属性从相对更改为绝对，它应该可以工作。

于 2013-10-27T11:39:42.187 回答
0

您可以使用 clearfix 来保留布局。从主 div 中删除“溢出：隐藏”并添加 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-inner 需要将内容隐藏在宽度集之外，如果它设置为与正确的偏移量相同，它似乎添加了一个填充工作。唯一的问题是，一旦滑入到位，文本就会跳动一点。

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

我也在图像上设置了一个明确的宽度，只是因为如果你不这样做，它们会跳跃一点（因为当它们滑入视图并且填充到位时，100% 的宽度会发生变化）。你可以在这里看到它：http: //jsfiddle.net/P7mdV/3/

于 2013-10-27T11:20:43.603 回答
0

试试这个 HTML 代码：我在 imageSlider 之外放置了 slideCaption1

<div class="slideCaption1"">
    <div class="slideText1"><span>PARIS</span></div>        
</div>

<div class="imageSlider">
    <div class="box">

    </div>
  </div>

CSS：

position: absolute;
z-index: 9;
right: 119px;
top: 20px;

从此代码中，您不必从 div imageSlider 中删除 overflow:hidden 属性。

于 2013-10-27T11:39:04.893 回答