1

使用 Bootstrap 2.3 我创建了两个.gold-ratio .span6父 div，每个都包含一个.left-ratio和.right-ratiodiv。在我.left-ratio的 div 里面是一个图像，在.right-ratiodiv 里面是一些描述图像的文本。但是，我的.left-ratiodiv 填充到父 div 中，并且 div 中的文本.right-ratio无处可寻。一切都设置为float: left，两个子 div 都是display: inline-block. 不太确定为什么图像占据了一切。

JSFIDDLE

HTML：

<div class="row center">
           <ul class="thumbnails">
                <li class="span6" id="item1">
                    <div class="gold-ratio">
                        <div class="ratio-left" id="pic1">
                            <img src="img/arch/studio4_1.jpg"/>
                        </div>
                        <div class="ratio-right">
                            <h3>Some Info</h3>
                            <p>Detailed Info</p>
                        </div><!--/.ratio-right-->
                    </div><!--/.gold-ratio-->
                </li><!--/.span6-->

                <li class="gold-ratio span6" id="item2">
                    <div class="ratio-left" id="pic2">
                        <img src="img/arch/studio4_1.jpg"/>
                    </div><!--/.ratio-left-->
                    <div class="ratio-right">
                        <h3>Some Info</h3>
                        <p>Detailed Info</p>
                    </div><!--/.ratio-right-->
                </li><!--/.gold-ratio .span6-->
           </ul><!--/.thumbnails-->
    </div><!--/.row .center-->

CSS：

.gold-ratio {
    display: block;
    float: left;
    overflow: hidden;
    height: 300px;
}

.left-ratio {
    display: inline-block;
    float: left;
}

.right-ratio {
    display: inline-block;
    float: left;
    width: 200px;
}

编辑：我使用的图像比 div 大，所以我让左 div 切断了所有溢出。

更新的JSFIDDLE

由于声誉低下，我无法发布照片，但也许这会有所帮助：

我有的：

___________________
|                 |
|                 |
|_________________|

这是我想要的：

___________________
|             |   |
|             |   |
|_____________|___|
4

1 回答 1

1

您在将标记与 CSS 规则链接时犯了一个错误。在您的 HTML 中，我可以看到<div class="ratio-left">and <div class="ratio-right">，但在您的样式表中，您正在尝试设置.left-ratioand的样式.right-ratio。

正如您在此处看到的，修复此规则可以解决问题并使它们的行为符合您的预期。

更新

要解决您的问题，您必须更好地了解浮动的工作原理。我将尝试简明扼要地解释它，并简单地关注手头的问题，而不是深入讨论 CSS 最复杂的方面之一：

当一个元素浮动时，它会被尽可能地推向包含元素的 float 属性指定的方向。与绝对定位元素相反，浮动元素仍然是文档流的一部分。简而言之，这意味着它们占据了自己的空间。

在您的情况下，这就是问题所在。

您有一个固定宽度 ( li.span6) 的容器。在此元素内，您有另一个容器 ( div.golden-ratio)，其中包含两个容器 (div.left-ratio和div.right-ratio)。最后两个容器的设计目的是float:left（您可以摆脱display: inline，因为浮动元素会自动制成一个盒子；也许您正在寻找display:inline-block可以使您免于很多麻烦的方法）。

然而，由于这最后两个容器没有固定的宽度，它们采用任何宽度的内容。

div.left-ratio取内部的宽度img；不受约束，而是受max-width: 100%. 这指的是 100%，div.span6因为它是具有固定宽度的最后一个元素。

通过占据整个空间div.left-ratio推动div.right-ratio下一行。当您说它无处可寻时，那是因为您设置div.golden-ratio了overflow:hidden属性，并且具有固定的高度。overflow: hidden意思是：隐藏超出我固定宽度/高度的所有内容；因此，被推送的元素正在消失。

为了实现您想要做的事情，您必须通过给（或其内容）一些宽度限制（无论是像素、百分比还是任何您想要的）来腾出空间。div.righ-ratiodiv.left-ratio在这个更新的示例中，我将向您展示如何做到这一点。

……嗯……简明扼要……</p>

于 2013-03-10T02:33:18.827 回答