在HTML 5中垂直对齐div

Question

vertically I am trying to make a carousel by myself without using any other tools like Bootstrap.

I came across the situation where my images are not aligned horizontally. I tried using display: inline-block and float: left separately and desperately, but they didn't seem to be the case of mine. Also, using different techniques dealing with the overflow did not affect the divs either.

So here is my HTML structure:

<div id="image-slider">
    <div id="images">
        <div class="item"><img src="images/image0.jpg"></div>
        <div class="item"><img src="images/image1.jpg"></div>
        <div class="item"><img src="images/image2.jpg"></div>
        <div class="item"><img src="images/image3.jpg"></div>
        <div class="item"><img src="images/image4.jpg"></div>
    </div>
    <ul id="indicator">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <input type="button" class="switch" id="prev" value="&lt;">
    <input type="button" class="switch" id="next" value="&gt;">
</div>

And here comes the corresponding CSS code:

#image-slider, .item, .item img { /* Tried removing the ".item img" but the images were too big if so */
    width: 100%;
    height: 100%;
}

#image-slider {
    position: relative;
    overflow: hidden;
}

#indicator {
    position: absolute;
    bottom: 0;
}

#images, .item { position: relative; }
.item { display: inline-block; }

So how do I fix it? Oh, another question: how do I modify the #indicator so that the elements inside are clickable elements (without using tools)?

Answer 1

Answer for first one

One thing can be the usage of display: inline-block and the other method of using float: left requires that other tag is having float: right so that they can float infront of each other.

And then just give them a width of, lets say 60% to the left div and 35% to the right (you can use 40% too). This way, they won't mix-up with each other.

One issue in not-floating-infront-of-each-other can be that the width of the divs is more than the width allowed. To prevent that, you can use max-width to ensure that they are having a max of this value and they donot exceed the value.

Answer for second question

You can create a clickable element using jQuery as:

$('selector').click(function () {
 /* trigger click with 
  * $(this).trigger('click') or do what ever you want..
  */
}

This way, you can make an element clickable, and to change the cursor use

selector {
  cursor: pointer; // to create a pointer for that..
}

And the feel would be such as a click was occured!

Answer 2

Here is a jsfiddle of your code, which can be very helpful to allow people to see the interaction and quickly diagnose an issue.

The issue is basically twofold, a you need a float:left on the images. And your bounding box needs to match the exact size of the images. In the example I used 200px due to no images.

In html all elements are clickable, but you need jQuery (easily handles the events) to capture the click event and "do" something (callback function). You then just set the cursor to pointer so that the UI feels like a clickable item.

A sample jQuery item would be:

$('.item img').on('click',function(){
       // Do something here.
       alert('img clicked');
});

Suggest using classes over ids, minor issue though.

And this is almost the same answer as above...just saw it.

Answer 3

not really sure what your asking for so i made everything horizontal.. hope this helps

HTML:

<div id="image-slider">
  <div id="images">
    <div class="item"><span class="finger"><img src="images/image0.jpg"></span> <span class="finger"><img src="images/image0.jpg"></span><span class="finger"> <img src="images/image0.jpg"></span> <span class="finger"><img src="images/image0.jpg"></span><span class="finger"> <img src="images/image0.jpg"></span> <span class="finger"><img src="images/image0.jpg"></span><span class="finger"> <img src="images/image0.jpg"></span> </div>
  </div>
  <table>
    <tr>
      <td><ul id="indicator"></td>
      <td><li>1</li></td>
      <td><li>2</li></td>
      <td><li>3</li></td>
      <td><li>4</li></td>
      <td><li>5</li>
        </ul></td>
    </tr>
  </table>
  <input type="button" class="switch" id="prev" value="&lt;">
  <input type="button" class="switch" id="next" value="&gt;">
</div>

CSS:

.finger:hover{cursor:pointer;}