在垂直方向上,我尝试自己制作一个旋转木马,而不使用任何其他工具,例如 Bootstrap。
我遇到过图像没有水平对齐的情况。我拼命地尝试分别使用display: inline-block
和float: left
,但他们似乎不是我的情况。此外,使用不同的技术处理溢出也不会影响 div。
这是我的 HTML 结构:
<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="<">
<input type="button" class="switch" id="next" value=">">
</div>
相应的CSS代码如下:
#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; }
那我该如何解决呢?哦,还有一个问题:如何修改#indicator,让里面的元素是可点击的元素(不用工具)?
最佳答案
第一个答案
一件事可能是 display: inline-block
的使用,另一种使用 float: left
的方法要求其他标签具有 float: right
这样它们就可以漂浮在彼此的前面。
然后给它们一个宽度,假设左边的 div 是 60%
,右边的是 35%
(你也可以使用 40%)。这样,它们就不会相互混淆。
非 float 冲突中的一个问题可能是 div 的宽度超过了允许的宽度。为防止出现这种情况,您可以使用 max-width
来确保它们具有此值的最大值并且不会超过该值。
第二个问题的答案
您可以使用 jQuery 创建一个可点击的元素:
$('selector').click(function () {
/* trigger click with
* $(this).trigger('click') or do what ever you want..
*/
}
这样,您可以使元素可点击,并使用更改光标
selector {
cursor: pointer; // to create a pointer for that..
}
感觉就像发生了点击!
关于javascript - 在 HTML 5 中垂直对齐 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19386066/