Question

嗨我想在我的照片按钮上放一个缩略图，但它超出了我在这里的整个范围我的代码在这里是整个代码http://jsfiddle.net/dP4eL/ 我正在使用twitter bootstrap

<div class="tab-content">
    <div class="tab-pane fade in active" id="home"><div class="container">
        <div class="row">
            <ul class="thumbnails">
                <li class="span4">
                  <div class="thumbnail">
                    <img src="Hydrangeas.jpg" alt="product 1">
                    <div class="caption">
                        <h5>Product detail</h5>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore       magna aliqua.</p>
                        <br>
                        <div class="span1">
                            <div class="thumbnail"><img src="Hydrangeas.jpg" alt="image">
                                <a href="#" class="btn btn-warning">fav</a>
                            </div>
                        </br>
                    </div>
                </p>
            </div>
        </div>
    </li>

谢谢

Answer 1

很难从你那里有限的代码中分辨出来，但如果你想要一个div来切断额外的内容，你可以设置它的宽度和高度，并将它的溢出设置为隐藏，如下所示：

.span1 {
    width: 100px;
    height: 100px;
    overflow:hidden;
}

只需根据您的规格更改宽度和高度。

Answer 2

您的问题是，班级span的属性为float: left。 Float从文档的浮动中删除元素。

[class*="span"] {
    float: left;
}

您的.. css声明中有多个此css实例。我看到它的方式，你有两个选择。

从所有实例中删除float: left，或应用clearfix css class to your elements。这将确保您的div保留在文档流中，并且父div扩展为包含它。

我会为你创建一个演示，但是你的js小提琴中有很多css，js小提琴不能以合理的速度解析它。

Answer 3

删除你的浮动：你的跨度的左设置。如果您对此不满意，请尝试使用表格：D

Answer 4

你的问题有点难以理解 - 我想你确实希望那个小的“image / Favbutton”-Box保留在它的parent-div中？！

Bootstrap应该以正确的方式使用浮动，所以尝试添加到你的.thumbnail类：

.thumbnail { overflow: hidden; }

如果这就是你想要实现的目标。

我的跨度有什么问题

4 个答案: