css - 在父 div 中并排子 div

Question

使用 Bootstrap 2.3 我创建了两个 .gold-ratio .span6 父 div，每个都包含一个 .left-ratio 和 .right-ratio 分区。在我的 .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 ，修复此规则可以解决问题，并使它们的行为与我相信的一样。

更新

要解决您的问题，您必须更好地理解 float 的工作原理。我将尝试简明扼要地解释它，只关注手头的事情，而不是深入 CSS 最复杂的方面之一的细节:

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

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

您有一个固定宽度的容器 ( li.span6 )。在此元素内，您有另一个容器 ( div.golden-ratio )，其中包含两个容器 ( div.left-ratio 和 div.right-ratio )。最后两个容器设计用于 float:left (您可以去掉 display: inline，因为 float 元素会自动变成一个盒子；也许您正在查看 display:inline-block，这会让您免于很多麻烦)。

但是，由于这最后两个容器没有固定宽度，因此它们会采用其内容的任意宽度。

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

通过占用整个空间div.left-ratio推 div.right-ratio在下一行。当你说找不到它时，那是因为你的 div.golden-ratio有 overflow:hidden属性集和固定高度。 overflow: hidden意思是:隐藏超出我固定宽度/高度的所有内容；因此，被插入的元素消失。

要实现您想做的事情，您必须为 div.righ-ratio 腾出空间 通过提供 div.left-ratio (或其内容)一些宽度约束(无论是像素、百分比还是您想要的任何内容)。在 this updated example我将向您展示如何做到这一点。

……好吧……简洁就到此为止了……