父 div 中并排的子 div

Question

使用 Bootstrap 2.3，我创建了两个 .gold-ratio .span6 父 div，每个都包含一个 .left-ratio 和 .right-ratio div。我的.left-ratio div 里面是一张图片，.right-ratio div 里面是一些描述图片的文字。但是，我的 .left-ratio div 填充到父 div 中，.right-ratio div 中的文本找不到。一切都设置为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

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

我有什么：

___________________
|                 |
|                 |
|_________________|

这就是我想要的：

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

Answer 1

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

如您所见 here，修复此规则可以解决问题，并使它们的行为符合您的预期。

更新

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

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

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

您有一个固定宽度的容器 (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-ratio腾出空间，通过给div.left-ratio（或其内容）一些宽度限制（无论是像素、百分比还是任何你想要的)。在this updated example 中，我向您展示了如何做到这一点。

……嗯……就简洁……