2

我有一个 CSS 设置，其中有一个绝对定位的 PNG 图像，它有一个透明区域，充当一个窗口，让一个充满图像的 div 可以在它后面显示。那个 div 也是绝对定位的，它的内容是一系列向左浮动的图像，因此它们都在一行中。

问题是这个充满图像的 div 比容器宽得多，所以除非我为图像容器 div 指定宽度，否则图像都只是垂直堆叠。我希望它们并排排列，但我不能硬编码包含 div 宽度的值，因为它可以改变。我该怎么做呢？这是我的代码：

<div class="slider_box">
    <div class="slider_images">
        <img class="slider_image" src="img/share/recipes/pizza.jpg" alt="Pizza"/>
        <img class="slider_image" src="img/share/recipes/pizza.jpg" alt="Pizza"/>
        <img class="slider_image" src="img/share/recipes/pizza.jpg" alt="Pizza"/>
        <img class="slider_image" src="img/share/recipes/pizza.jpg" alt="Pizza"/>
        <img class="slider_image" src="img/share/recipes/pizza.jpg" alt="Pizza"/>
    </div> <!--images show through the slider mask, and should be floated left (or inline-block). Currently can't be side by side without specifying width of slider_images-->
    <img class="slider_mask" alt="Slider Mask" src="img/share_recipe_mask.png"/><!--sits on top of slider images -->
    <h4>Semolina <br/>Olive Oil Cake</h4> <!--sits on top of slider mask-->
</div>

.slider_box {
    width:190px; height:220px; position: absolute; overflow: hidden;
    .slider_images {
        position: absolute; bottom: 0;
        img { float: none; width: 190px; height:158px; }
    }
    .slider_mask { position: absolute; }
    h4 { .cubano; font-size:1.8em; position: absolute; color: #fff; top:11px; left:14px; line-height: 110%; }
}

CSS

.slider_box {
    width:190px; height:220px; position: absolute; overflow: hidden;
    .slider_images {
        position: absolute; bottom: 0;
        img { float: none; width: 190px; height:158px; }
    }
    .slider_mask { position: absolute; }
    h4 { .cubano; font-size:1.8em; position: absolute; color: #fff; top:11px; left:14px; line-height: 110%; }
}
.slider_nav {
    .slider_nav_btn { width:10px; height:10px; display:inline-block; .border-radius(50%,50%,50%,50%); color: #f3895f; }
    .slider_nav_btn:hover { color: @redDk; }
}
4

1 回答 1

0

如果我正确掌握情况，您需要容器是口罩的大小，对吗？

用一点 Javascript：

<div class="slider_box" id="easyID">
<!-- snip -->
<img class="slider_mask" id="easytoidentify" src="whatever" />
<script type="text/javascript">
  document.getElementById('easyID').style.width = document.getElementById('easytoidentify').width;
</script>

从那里，您只需要添加overflow:hidden到“slider_box”css 并定义“slider_images”的宽度，使其足够宽。只要启用了Javascript，它就可以工作。

于 2012-10-27T23:58:08.477 回答