0

嗨我想在我的图片按钮上有一个缩略图，但它超出了我这里的整个范围是我的代码这里是整个代码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>

谢谢

4

4 回答 4

0

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

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

只需将宽度和高度更改为您的规格。

于 2012-10-01T23:28:12.700 回答
0

您的问题是该类span具有属性float: left。Float 从文档的浮动中移除元素。

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

您的 .. css 声明中有此 css 的多个实例。在我看来，你有两个选择。

float: left从所有实例中删除，或将clearfix css 类应用于您的元素。这将确保您的 div 保留在文档流中，并且您的父 div 扩展以包含它。

我会为你创建一个演示，但是你的 js fiddle 中有太多的 css，以至于 js fiddle 无法以合理的速度解析它。

于 2012-10-02T06:59:01.330 回答
0

删除您的 float:left 跨度设置。如果您对此不满意，请尝试使用表：D

于 2012-10-02T07:17:19.257 回答
0

您的问题有点难以理解-我想您确实希望那个小“图像/收藏按钮”-Box 保留在其父 div 中？！

Bootstrap 应该以正确的方式使用浮动，因此，尝试添加到您的 .thumbnail-class：

.thumbnail { overflow: hidden; }

如果那是你想要达到的。

于 2012-10-02T11:53:20.060 回答