2

I have a CSS setup where I have an PNG image, absolutely positioned, with a transparent area that acts as sort of a window for a div full of images to show through behind it. That div is absolutely positioned as well, and its contents are a series of images floated left so that they are all in a single line.

The problem is that this div full of images is much wider than the container, so unless I specify a width for the image container div, the images all just stack up vertically. I want them to line up side by side, but I can't hard code a value for the width of the containing div, because it can change. How do I do this? Here's my code:

<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 に答える