我的跨度有什么问题答案

【问题标题】：what is wrong with my span我的跨度有什么问题
【发布时间】：2012-10-02 22:39:42
【问题描述】：

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

<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>

谢谢

【问题讨论】：

两个问题：</br> 应该关闭什么以及在两个divs 之间徘徊的孤独</p> 是什么？
你有大约 4 个 div 没有关闭。
我认为这个
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。

会带我到下一行，所以我可以在
内的描述下获得图片的缩略图
@behzad_b 这不是被问到的。
代码继续，div下的其他span还没有关闭

标签： css twitter-bootstrap thumbnails html

【解决方案1】：

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

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

.thumbnail { overflow: hidden; }

如果那是你想要达到的。

【讨论】：

不，我想要，我希望那个小 imag/fav 按钮留在父级内

【解决方案2】：

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

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

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

【讨论】：

我改变它仍然出现故障......如果你在 jsfiddle 中看到它，第一个出现故障

【解决方案3】：

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

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

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

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

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

【讨论】：

【解决方案4】：

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

【讨论】：